webpack ignores .babelrc and babel.config.js

Question

I am using webpack 4.32.2, and @babel/core 7.2.0

my webpack config is located here

projectroot/build/webpack.config.js

When I run my webpack config everything works fine except that my babel.config.js, which is located here

projectroot/babel.config.js

is simply being ignored.

It's the same if I use

projectroot/.babelrc

None of these files seems to matter.

Here's what the babel loader section in webpack.config.js looks like (note I've added the rootMode: 'upward' directive to make sure that any.babelrc or babel.config.js in any above directory is being found:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  options: {
    rootMode: 'upward'
  } 
}

I'd like to be able to use babel.config.js but if there's a problem with that I'd also go with.babelrc. At the moment neither one is being picked up by webpack.

Answer 1

My error was in package.json, i forgot to delete:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

babel.config.js:

process.env.NODE_ENV = "development";

module.exports = {
    plugins: ["react-refresh/babel"],
    presets: [
        [
            "@babel/preset-typescript",
            {
                allExtensions: true,
                allowNamespaces: true,
                isTSX: true,
                optimizeConstEnums: true,
            },
        ],
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                // https://babeljs.io/docs/en/babel-preset-react
                runtime: "automatic",
                pure: true,
                useBuiltIns: true,
            },
        ],
    ],
};