Webpacker: The resolved_paths option has been deprecated. Use additional

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?

Is it possible to change the default resolve in Webpack?

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 ).

How to resolve module requests in Webpack?

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.

Is null-loader deprecated in Webpack 5?

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.

What directories should be searched when resolving modules in Webpack?

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.

Webpacker: The resolved_paths option has been deprecated. Use additional_paths instead

Tags:

ruby-on-rails

webpacker

Dave Slutzkin

People also ask

1 Answers

Maciej Małecki

Recent Activity

Donate For Us