React项目构建报错：无法找到@babel/preset-env模块求助

我在用Yarn搭建配置Babel的React应用，执行构建生成bundle.js时遇到了下面的错误：

ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from '/Users/react-file/Desktop/indecision'
    at Function.resolveSync [as sync] (/Users/react-file/Desktop/indecision/node_modules/resolve/lib/sync.js:89:15)
    at resolveStandardizedName (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (<anonymous>)
    at buildRootChain (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:120:29)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:95:62)
    at loadPrivatePartialConfig.next (<anonymous>)
    at Function.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:120:25)
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:244:28)
    at Function.sync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:84:14)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/index.js:41:61)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:151:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:231:18)
    at Object.loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:64:18)
    at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:59:12)

我的相关配置文件： #

package.json

{ "name": "Box", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "server": "live-server public/", "build": "webpack --watch", "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch" }, "dependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^8.1.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "live-server": "^1.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", "validator": "^13.0.0", "webpack": "^4.43.0" }, "devDependencies": { "@babel/core": "^7.9.6", "webpack-cli": "^3.3.11" } }

webpack.config.js

const path = require('path');
module.exports = {
 entry: './src/app.js',
 output: {
 path: path.join(__dirname, 'public'),
 filename: 'bundle.js'
 },
 module: {
 rules: [{ loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ }]
 }
};

.babelrc

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

你现在的问题核心是混用了Babel 6和Babel 7的依赖包，导致版本冲突：

1. babel-loader@8.x 是专门配合Babel 7使用的，但你同时安装了Babel 6的核心包 babel-core@6.x 和Babel 7的核心包 @babel/core@7.x，这会让babel-loader优先调用Babel 7的核心模块；
2. 但你安装的preset还是Babel 6版本的 babel-preset-env 和 babel-preset-react，而Babel 7要求preset使用带@babel/前缀的包（比如@babel/preset-env），所以Babel 7找不到对应的preset模块，就抛出了这个错误。

1. 卸载旧的Babel 6依赖包 #

首先把所有Babel 6相关的包都删掉：

yarn remove babel-cli babel-core babel-preset-env babel-preset-react

2. 安装Babel 7的正确依赖 #

安装Babel 7所需的核心包、preset和cli工具：

yarn add --dev @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader

3. 更新配置文件 #

更新 .babelrc

把preset名称改成Babel 7的格式：

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

更新 package.json 里的 scripts

把build-babel命令里的preset参数也改成新的名称：

"scripts": {
  "server": "live-server public/",
  "build": "webpack --watch",
  "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=@babel/preset-env,@babel/preset-react --watch"
}

4. 重新构建 #

现在可以重新执行构建命令，应该就能正常生成bundle.js了：

yarn run build

内容的提问来源于stack exchange，提问作者user12073145