What is the location of .babelrc file when using create-react-app?

Question

I used create-react-app to build a project and Babel comes packaged with the installation. Usually .babelrc file is located in the root of the project but I don't see one there. I need to modify one of the presets in the file but cannot seem to find it.

Do I need to manually create the .babelrc file or is it already included? If so what is the location of the file?

Answer 1

create-react-app utilizes the babel-runtime plugin to run babel through its own webpack settings in the react-scripts package.

In the webpack file itself (./node_modules/react-scripts/config/webpack.config.dev.js), it has .babelrc set to false:

      {
        test: /\.(js|jsx|mjs)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          // @remove-on-eject-begin
          babelrc: false,
          presets: [require.resolve('babel-preset-react-app')],
          // @remove-on-eject-end
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
        },

Unfortunately, if you need to edit something...you will most likely have to eject with npm run eject to get access to the webpack files.