Question

我正在尝试使用Webpack 4从零开始构建React应用程序

尝试构建时出现以下错误。尽管babel-core已经安装，但我也尝试安装@ babel / core，但没有成功

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/digvijay.upadhyay/digvijayu/react_webpack_4_from_scratch/node_modules/babel-loader/lib/index.js:5:15)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 500 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlPlugin]
};

edit：将包json文件添加到问题中 package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "path": "^0.12.7",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

{ “ name”：“ boiler-plate-react-webpack-4”， “ main”：“ index.js”， “脚本”：{ “ start”：“ webpack-dev-server --mode development --open --display-error-details”， “ build-dev”：“ webpack --mode development”， “ build-prod”：“ webpack --mode production”， “ test”：“回显\”错误：未指定测试\“ &&退出1” }， “ devDependencies”：{ “ babel-core”：“ ^ 6.26.3”， “ babel-loader”：“ ^ 8.0.0”， “ babel-preset-env”：“ ^ 1.7.0”， “ babel-preset-react”：“ ^ 6.24.1”， “ html-webpack-plugin”：“ ^ 3.2.0”， “ webpack”：“ ^ 4.17.1”， “ webpack-cli”：“ ^ 3.1.0”， “ webpack-dev-server”：“ ^ 3.1.6” }， “依赖关系”：{ “ @ babel / core”：“ ^ 7.0.0”， “ path”：“ ^ 0.12.7”， “ react”：“ ^ 16.4.2”， “ react-dom”：“ ^ 16.4.2” } }

Answer 1

已解决：

问题出在软件包babel-loader上，最新版本需要@ babel / core。将版本降级到7.x，现在可以了

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

Answer 2

是的，babel-loader 8要求babel 7，令人困惑。如果您想使用新的通天塔，那就很简单了。您将执行以下操作：

"devDependencies": {
    "babel-loader": "^8.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",,
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

无论您在什么位置定义babel预设，都需要对其做一点改动：

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

您可以在这里看到我更新为babel 7的项目的差异：https://github.com/ccnmtl/astro-interactives/commit/97b31ca7948d177d7f41439bdbeb0a54cd3e69da

Answer 3

解决此问题的另一种方法是保留@babel/core并安装babel-core : ^7.0.0-bridge.0。它是一个桥接程序包，可让您获得以前的babel程序包的支持，并将babel内核更新为最新的。然后，您也可以将babel-loader升级到LTS。

Answer 4

尝试安装最新的加载程序。

   npm install -D babel-loader @babel/core @babel/preset-env OR
   npm install -D babel-loader@latest @babel/core@latest @babel/preset-env@latest

Answer 5

<块引用>

使用 babel 依赖版本

<块引用>

>=7.8.7

"devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
}

React build问题，。/ src / index.js中的错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：

5 个答案: