webpack module build fails when attempting to upgrade from Babel 6 to Babel 7

Question

I am trying to upgrade our project from Babel 6 to 7. I've made the following changes to package.json:

  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  },

Got rid of babel-preset-* and added new @babel/* packages. Also, added Jest.

  "devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.3.4",
    "@babel/preset-env": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-polyfill": "6.26.0",
    "jest": "24.3.0",
    "react-test-renderer": "16.8.4",
    "webpack": "4.28.4",
    "webpack-bundle-analyzer": "3.1.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "workbox-webpack-plugin": "3.6.3"
  },

Our project uses Babel and Webpack, and we manage Babel configuration through webpack.config.js. So, the following changes were made to that file:

webpack.config.js

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        }
      },
    ]
  }

Updated the presets section to use @babel/react and @babel/env.

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/react', '@babel/env'],
          plugins: ['transform-class-properties', 'syntax-dynamic-import', 'transform-es2015-destructuring', 'transform-object-rest-spread']
        }
      },
    ]
  }

When I run webpack --mode development, webpack throws the following error:

ERROR in ./src/entry2.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from 'C:\MyApp'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?
    at Function.module.exports [as sync] (C:\MyApp\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (C:\MyApp\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\MyApp\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\MyApp\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\MyApp\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:140:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\MyApp\node_modules\babel-loader\lib\index.js:3:103)
    at _next (C:\MyApp\node_modules\babel-loader\lib\index.js:5:194)
    at C:\MyApp\node_modules\babel-loader\lib\index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:5:97)
    at Object.loader (C:\MyApp\node_modules\babel-loader\lib\index.js:56:18)
    at Object.<anonymous> (C:\MyApp\node_modules\babel-loader\lib\index.js:51:12)

I don't understand why webpack is looking for a babel-preset-react module, when I have updated the presets section for babel-loader to use '@babel/react'. Heck, it even asks, "Did you mean @babel/react?" Why, yes -- and that's what I said! Any thoughts?

I grep'd the node_modules directory for references to 'babel-preset-react' and got several hits, from packages in our dependencies (not devDependencies) section. But, I would assume that npm install would take care of satisfying those packages' dependencies. Am I wrong?

Lastly, what is the 4th line talking about, when it mentions using "module:react"? Is that relevant, here?

Answer 1

I ran into a similar issue using the updgrade tool as mentioned, but what fixed it for me was in my webpack config, the tool didn't detect a necessary change in syntax...

Answer 2

As mentioned in the comments, I hadn't come across the upgrade tool. Using it helped me to eliminate some mistakes I had introduced into package.json, by trying to do the upgrade manually.

However, the error persisted. But, after applying the changes suggested by the upgrade tool, I saw (and removed) the following unnecessary section:

  "babel": {
    "presets": [
      "env",
      "react"
    ]
  }

Having this section is what was causing my compilation errors. Apparently, we were able to run for months with this sitting alongside the config options for webpack and (in blissful ignorance) not experience any issues. After I removed it, everything built fine, with Babel 7, relying solely on the webpack configs.

It would be nice if there were a tool to help optimize configuration (i.e., identify redundancies/conflicts) in projects that use webpack together with Babel. Between .babelrc, package.json and webpack.config.js, there are currently just too many potential pitfalls.

Thanks again for the help!