Babel is examining the package.json of a target module for configuration when transpiling

Question

I have an issue where I want to transpile the ...spread operator of a package I'm using.

Note that I'm using babel 6, in the context of ejected create-react-app at scripts version 1.1.5. I have a minimal reproduction for this.

I can't find it now, but I'm using the technique suggested by some babel documentation, where I add this to my webpack config:

          {
            test: /\.m?js$/,
            exclude: {
              test: /(node_modules)/, // Exclude libraries in node_modules ...
              not: [

                /@monaco-editor\/react/
              ]
            },
            use: {
              loader: require.resolve('babel-loader'),
              options: {

                "plugins": [
                  [require.resolve("babel-plugin-transform-object-rest-spread"), { "useBuiltIns": true }]]
                
              }
            }
          },

Basically saying 'Don't transpile anything in node_modules, except for that one package, and transpile that using this plugin'.

The issue I have when you run this, you get this error:

./node_modules/@monaco-editor/react/lib/es/index.js
Module build failed: Error: Couldn't find preset "@babel/preset-env" relative to directory "/Users/djohnston/git/cra1/node_modules/@monaco-editor/react"
    at Array.map (<anonymous>)

Note that the babel preset it is complaining about is the babel 7 @babel/preset-env preset, whereas I'm using babel 6.

However - if you navigate into node_modules/@monaco-editor/react/package.json and remove the following babel property from it:

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },

Then the code starts working.

What this suggests to me is that babel is examining the package.json and decides to start using @babel/preset-env to start transpiling it, rather than using just the config I had specified in my webpack config.

Why is babel doing this, and is there a configuration option I can use to solve this?

Minimum repro for this issue: https://github.com/dwjohnston/cra1-monaco/tree/eject-solve-attempt

Issue on @monaco-editor/react I've raised about this issue (requesting that they transpile the spread operator: https://github.com/suren-atoyan/monaco-react/issues/221)

Seems like you maybe want `babelrc: false` in the `babel-loader` options? — loganfsmyth, Apr 12 '21 at 00:30
@loganfsmyth Yup! That's solves it. Feel free to post that as an answer. — dwjohnston, Apr 12 '21 at 02:37

score 1 · Accepted Answer · answered Apr 12 '21 at 15:56

Babel 6 was very aggressive about reading config files, which was an issue for exactly the reasons you are running into. Babel 7 changed its config file reading behavior to avoid these problems.

Your only option in this case is to explicitly tell Babel 6 to skip .babelrc/package.json processing by passing babelrc: false to babel-loader in its options.

Babel is examining the package.json of a target module for configuration when transpiling

1 Answers1