Babel Loader ignores webpack resolve config for its own plugins

[alexander-schranz]

Webpack Version:

4.46.0

Babel Core Version:

"@babel/core": "^7.5.5", -> 7.13.8

Babel Loader Version:

"babel-loader": "^8.0.6", -> 8.2.2

Please tell us about your environment:

OSX 10.14.6

Current behavior:

Error: Cannot find module '@babel/plugin-proposal-decorators'

Expected/desired behavior:

Find Babel plugin.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.

We have an uncommen directory structure which looks like the following:

• admin/assets
  • webpack.config.js
  • babel.config.json
• vendor/...
  • moduleA
    • package.json
    • .babelrc

The vendors are added as babelRoots:

{
    "babelrcRoots": [
        ".",
        "../../vendor/*"
    ]
}

because how npm works we need to override webpack module resolver to something like this:

        resolve: {
            modules: ['node_modules', assetAdminNodeModulesPath],
        },
        resolveLoader: {
            modules: ['node_modules', assetAdminNodeModulesPath],
        },

but it looks like babel-loader itself does not use this webpack config to load the plugin and so it ends with:

Error: Cannot find module '@babel/plugin-proposal-decorators'

• What is the expected behavior?

I would expect that the resolve config of weback is used to find the @babel/plugin-proposal-decorators module.

• What is the motivation / use case for changing the behavior?

Fixing problem with a custom dependency resolve configuration.

[JLHwung]

This is expected, the babel plugin is not loaded by webpack, instead it is resolved using node require.resolve so it is not and should not be aware of how Webpack resolve modules for your app.

Can you share a reproduction repo?

[nicolo-ribaudo]

Babel allows you to directly use require in your Babel config to load plugins however you want, bypassing Babel's resolution algorithm.

module.exports = {
  plugins: [
    require("../../custom-path/@babel/plugin-proposal-decorators")
  ]
}

[alexander-schranz]

Thx for the fast responses!

@JLHwung I did fast create a reproducer based on our setup we use in sulu/skeleton here: https://github.com/alexander-schranz/build-error-reproducer.

If you go there into the assets/admin and run npm install && npm run build you should get:

Error: Cannot find module '@babel/plugin-proposal-decorators'

@nicolo-ribaudo directly require the plugins is sadly not an option as we are not in control of all the .babelrc files. We would then need manually search for them and parse them.

[alexander-schranz]

@JLHwung a fallback to process.cwd to load modules would fix this issue. Not sure if this would be correct way to handle this. https://github.com/babel/babel/pull/12986/files