Babel-loader: .babelrc.js is being ignored

[ykadosh]

I'm submitting a bug report

Webpack Version:
4.29.6

Babel Core Version:
7.4.0

Babel Loader Version:
8.0.5

Please tell us about your environment:
Windows 10

Current behavior:
.babelrc.js files are being ignored

Expected/desired behavior:
.babelrc.js files are NOT being ignored :)

Additional Info

The project is a monorepo, where the root package (i.e. bundler) is placed as a sibling to the other subpackages (i.e. module1).

Both the root package and the subpackage have the same alias - components, but it points to a different path in each. However, apparently the module1 babelrc is being ignored, since babel is searching in the bundler package for modules that are in module1.

project/bundler/babel.config.js

const {resolve} = require('path');

module.exports = api => {
    api.cache(true);
    return {
        babelrcRoots: [
            '.',
            '../module1'
        ],
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: [
            [
                'module-resolver',
                {
                    cwd: resolve(__dirname, './babel.config.js'),
                    root: resolve(__dirname, './'),
                    alias: {
                        components: resolve(__dirname, './src/components'),
                        module1: resolve(__dirname, '../module1/src')
                    }
                }
            ]
        ]
    };
};

project/module1/.babelrc.js

const {resolve} = require('path');

module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        [
            require.resolve('babel-plugin-module-resolver'),
            {
                cwd: 'babelrc',
                root: resolve('./'),
                alias: {
                    components: resolve(__dirname, './src/components'),
                }
            }
        ]
    ]
};

The build fails with the following error:

ERROR in ../module1/src/Module1Component.jsx
Module not found: Error: Can't resolve 'path\to\bundler\src\components/Module1Component2' in 'path\to\module1\src'

[loganfsmyth]

If it's not loading, it's probably got something to do with your working directory, package scope, and the babelrcRoots, but since you've given no other info it's hard to say. I'd recommend reading over https://babeljs.io/docs/en/options#babelrcroots and https://babeljs.io/docs/en/config-files in general.

[ykadosh]

Thank you for replying @loganfsmyth, I have updated my report with additional information, hope that clears things up

[hampustagerud]

I have the same issue in a monorepo where my .babelrc.js is in the cwd of webpack but it still doesn't read it. I solved it by just importing it and setting it as the options in webpack.config.js:

const babelConfig = require('./.babelrc');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?/,
        exclude: /\/node_modules\//,
        loader: 'babel-loader',
        options: babelConfig // <--- Here :)
      },
      ...
    ]
  },
  ...
};

[ykadosh]

@hampustagerud this doesn't work when the subpackages have their own alias configuration using module-resolver. Does your monorepo have such configuration?

[hampustagerud]

I use module-resolver but it is just one alias that points to the same folder, I have 3 different applications accessing the same common folder (kinda like your project/module1/.babelrc.js). They all have their own .babelrc though so I'm guessing something else is wrong 🤔

What does your webpack config look like? I didn't write it before but I imported my .babelrc into my webpack.config.js (I hope that was understood, otherwise I apologise).

[ykadosh]

@hampustagerud That's exactly why it is working for you I guess. I have subpackages with the same alias pointing to a different folder (see my example - they all have components alias, but each package has its own components folder). However when I run babel it looks for the folder defined in the root.

Not sure whether this is a babel-loader issue or a module-resolver issue.
I was able to temporarily fix this using a custom resolvePath function, but it's just a workaround.

[Domiii]

I had it working fine when using .babelrc, but not with .babelrc.js. The quick-fix by @hampustagerud solves it for me though - thanks!

Got the same version: [email protected]

[abettadapur]

@ykadosh I am having the exact same issue as you, with the same setup. Did you ever figure anything out?

[ya332]

The .js extension seems redundant. Try to rename it .babelrc
This is my webpack.config.js

var path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/components/index.js',
    output: {
        path: path.resolve('build'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            }
        ]
    },
    externals: {  // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react',
            umd: 'react',
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom',
            umd: 'react-dom'
        }
    }
}

This is my .babelrc

{
    "presets": [
        "react",
        "env",
        "stage-0"
    ]
}

Make sure you do npm install --save-dev for the following libraries

"@babel/runtime": "^7.7.7",
"babel-core": "^6.21.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",

You will get a warning saying that babel-loader version is 7, but babel core is version 6. The npm logs suggests to use a .env file at the root with the following line

SKIP_PREFLIGHT_CHECK=true

Full repo is here