webpackbabel-loader

.babelrc file is not applied


I want to use ts only as a form for type-check, so I use babel-loader and add only typescript-preset as shown below. It is not applied when writing the .babelrc file, but it is applied only if you give the option inside the babel-loader inside the webpack.config.js file like this. When I read the official documentation, I understood that babel-loader automatically recognizes and applies the .babelrc file. Am I wrong?

myRepo

.babelrc

{
  "env": {
    "development": {
      "presets": ["@babel/preset-env"],
      "plugins": []
    },
    "production": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": { "ie": 11 }
          }
        ],
        "@babel/preset-typescript"
      ],
      "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]]
    }
  }
}


Solution

  • There are many things that can go wrong and without direct access to your setup it's pretty hard to rule simple things out (like .babelrc being in the wrong directory).

    However, if you are running babel-loader version 7.1.1 or earlier, then it's very possible that you've run into a bug where babel.transform did not read the .babelrc file correctly by default.

    There are two solutions:

    Solution 1: Upgrade babel-loader to 7.1.2+

    The bug was patched in 7.1.2 and 7.1.4 onward.

    Solution 2: Add babelrc: true to your webpack options

    If you can't upgrade for some reason, then you simply need to explicitly tell babel.transform to look for a babel config file:

      //...
      {
        loader: 'babel-loader',
        options: {
          babelrc: true,
        }
      }
      // ...