I bumped webpacker from 4.x to 5.2.1 and started getting this warning:
The resolved_paths option has been deprecated. Use additional_paths instead.
This seems straightforward enough, my config/webpacker.yml
was almost unmodified:
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: [
'app/assets',
]
But doing a simple s/resolved_paths/additional_paths/
there doesn't work:
[Webpacker] Compiling...
[Webpacker] Compilation failed:
Hash: 7448f36a43523a84e146
Version: webpack 4.44.1
Time: 5803ms
Built at: 10/15/2020 11:57:06 AM
Asset Size Chunks Chunk Names
js/application-a019b363e4513fe092e6.js 3.02 MiB application [emitted] [immutable] application
js/application-a019b363e4513fe092e6.js.map 3.03 MiB application [emitted] [dev] application
js/hello_react-40e806bdb6de496532d8.js 1.05 MiB hello_react [emitted] [immutable] hello_react
js/hello_react-40e806bdb6de496532d8.js.map 1.21 MiB hello_react [emitted] [dev] hello_react
js/server_rendering-9cd9dcc6e1cebb2a8063.js 2.25 MiB server_rendering [emitted] [immutable] server_rendering
js/server_rendering-9cd9dcc6e1cebb2a8063.js.map 2.44 MiB server_rendering [emitted] [dev] server_rendering
manifest.json 1.05 KiB [emitted]
Entrypoint application = js/application-a019b363e4513fe092e6.js js/application-a019b363e4513fe092e6.js.map
Entrypoint hello_react = js/hello_react-40e806bdb6de496532d8.js js/hello_react-40e806bdb6de496532d8.js.map
Entrypoint server_rendering = js/server_rendering-9cd9dcc6e1cebb2a8063.js js/server_rendering-9cd9dcc6e1cebb2a8063.js.map
[./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/components sync recursive ^\.\/.*$] ./app/javascript/components sync ^\.\/.*$ 2.42 KiB {application} {server_rendering} [built]
[./app/javascript/packs/application.js] 10.3 KiB {application} [built]
[./app/javascript/packs/hello_react.jsx] 1.05 KiB {hello_react} [built]
[./app/javascript/packs/server_rendering.js] 301 bytes {server_rendering} [built]
[./node_modules/webpack/buildin/amd-options.js] (webpack)/buildin/amd-options.js 80 bytes {application} {server_rendering} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {application} {server_rendering} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} {server_rendering} [built]
+ 474 hidden modules
ERROR in ./app/javascript/components/menu/MenuComponent.jsx
Module not found: Error: Can't resolve 'images/ellipsis-v.svg' in '/home/me/app/javascript/components/menu'
So obviously additional_paths
isn't just a drop-in replacement, even though the docs suggest it should be.
Before I jump into the source to try to understand what's happening here, anyone got a quick fix?
Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at Module Resolution for more explanation of how the resolver works. Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look for 'lodash' (see modules ).
When enabled, webpack would prefer to resolve module requests as relative requests instead of using modules from node_modules directories. Prefer absolute paths to resolve.roots when resolving. Whether to resolve symlinks to their symlinked location. When enabled, symlinked resources are resolved to their real path, not their symlinked location.
null-loader is deprecated in webpack 5. use alias: { xyz$: false } or absolute path alias: { [path.resolve (__dirname, './path/to/module')]: false } [string] values are supported since webpack 5.
Tell webpack what directories should be searched when resolving modules. Absolute and relative paths can both be used, but be aware that they will behave a bit differently.
The error is logged in the web browser's console, and it comes from the npm package. You need to upgrade both: the webpacker gem and @rails/webpacker npm package.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With