Webpacker 6.0.0.beta2 - Module not found: Error: Can't resolve modules with jsx extension.

[storm2513]

I'm trying to migrate from webpacker v5 to v6.
I've faced this issue with jsx modules:

Webpack error:

ERROR in ./app/javascript/javascripts/common/index.js 4:0-37
Module not found: Error: Can't resolve '../header' in '/path_to_app/app/javascript/javascripts/common'
 @ ./app/javascript/packs/common.js 1:0-37

ERROR in ./app/javascript/javascripts/common/index.js 5:0-37
Module not found: Error: Can't resolve '../footer' in '/path_to_app/app/javascript/javascripts/common'
 @ ./app/javascript/packs/common.js 1:0-37

ERROR in ./app/javascript/javascripts/common/index.js 6:0-37
Module not found: Error: Can't resolve '../modals' in '/path_to_app/app/javascript/javascripts/common'
 @ ./app/javascript/packs/common.js 1:0-37

ERROR in ./app/javascript/javascripts/common/index.js 7:0-44
Module not found: Error: Can't resolve '../top_banner' in '/path_to_app/app/javascript/javascripts/common'
 @ ./app/javascript/packs/common.js 1:0-37

packs/common.js

import '../javascripts/common/index';

javascripts/common/index

...
import renderHeader from '../header';
import renderFooter from '../footer';
import renderModals from '../modals';
import renderTopBanner from '../top_banner';
...

document.addEventListener('DOMContentLoaded', () => {
  renderTopBanner();
  renderHeader();
  renderFooter();
  renderModals();
});

If I change it to import renderHeader from '../header/index.jsx'; it loads correctly.

Issue is present with all .jsx files. import something from file doesn't work, import something from file.jsx seems to work.

What am I missing?

[rossta]

@storm2513 What's in your webpacker.yml? Any changes in that file since upgrading to v6?

Curious since I want to make sure I understand how it was working for you in v5.

[storm2513]

@rossta
webpacker.yml from v5

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2
    - .svg

  extensions:
    - .mjs
    - .js
    - .jsx
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .slim

development:
  <<: *default
  compile: true
  # source_entry_path: current-packs

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Extract and emit a css file
  extract_css: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

In v6 I haven't changed generated webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
    inline: true
    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
    overlay: true
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    disable_host_check: true
    # This option lets the browser open with your local IP
    use_local_ip: false
    # When enabled, nothing except the initial startup information will be written to the console.
    # This also means that errors or warnings from webpack are not visible.
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

[rossta]

@storm2513 Thanks, that's helpful.

Looks like in v5, you had - .jsx in your webpacker.yml under extensions, but this entry was removed in the v6 webpacker.yml—by design I believe.

The extensions used to be passed to webpack's resolve.extensions config, but now they appear to be hard-coded as follows:

webpacker/package/environments/base.js

Lines 93 to 94 in 1aca8aa

	resolve: {
	extensions: ['.js', '.mjs', '.ts', '.coffee'],

As a workaround, you can add back support by modifying your webpack config directly using the special webpack-merge function:

// config/webpack/base.js

const { webpackConfig, merge } = require('@rails/webpacker')`

module.exports = merge(webpackConfig, {
  resolve: {
    extensions: ['.jsx']
  }
})

I believe this should combine the default resolve.extensions with your additions but you'll need verify that this works.

There's a case to be made to updating the defaults as well, but you should be able to use this workaround for now.

[storm2513]

@rossta thank you! Worked like a charm!