webpack_解决babel-loader报错：'Module build failed (from ./node_modules/babel-loader/lib/index.js):'

目录

• 错误详情
• 报错时的package.json部分
• 报错原因
• 解决方法
  • 安装babel-loader 8.x | babel 7.x
  • 安装babel-loader 7.x | babel 6.x
  • npm文档推荐方法
• npm安装版本不一致原因
• 参考链接

错误详情

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'

报错时的package.json部分

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --mode development --env development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",

报错原因

官方默认babel-loader,babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel

解决方法

安装babel-loader 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",

安装babel-loader 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",

npm文档推荐方法

npm install -D babel-loader @babel/core @babel/preset-env webpack

    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",

npm安装版本不一致原因

babel舍弃了以前的babel--的命名方式，改成了@babel/-。修改依赖和.babelrc文件后就能正常启动项目了。babel-core7.0之后，包名升级为@babel/core。

参考链接

babel-loader
webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
Plugin/Preset files are not allowed to export objects,only functions.webpack报错/babel报错的解决办法