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報錯的解決辦法