Webpack 和 Babel - nodejs 和 yarn 更新后无法运行 dev-server

Question

我正在将 Node.js 从 8.11.1 升级到 12.20.0，并将 yarn 从 1.22.4 升级到 2.4.0。我的webpack版本是4.41.2.

我已经使用 nvm 和运行ning 下面的命令升级了 Node.js，然后更新了 babel.rc

yarn set version berry
yarn rebuild node-sass
yarn add core-js@3
yarn remove @babel/polyfill

我运行我的开发服务器通过调用 "dev-server": "cross-env NODE_ENV=development webpack-dev-server --host 127.0.0.1 --port 8080" 尝试运行我的开发服务器 () 时出现以下错误

ERROR in ./.yarn/$$virtual/webpack-dev-server-virtual-d551ff68b6/0/cache/webpack-dev-server-npm-3.9.0-e9c2d8aa12-bb763e0d55.zip/node_modules/webpack-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'ansi-html' in ...

ERROR in multi ./src/app.js
Module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\kermit\Documents\Projects\my_app'
 @ multi ./src/app.js main[0]

ERROR in ./.yarn/$$virtual/webpack-dev-server-virtual-d551ff68b6/0/cache/webpack-dev-server-npm-3.9.0-e9c2d8aa12-bb763e0d55.zip/node_modules/webpack-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'html-entities' in ...

我尝试在“依赖项”中安装 babel-loader，结果相同。

为什么babel-loader无法解析？

package.json

"devDependencies": {
   "@babel/cli": "^7.7.4",
   "@babel/core": "^7.7.4",
   "@babel/plugin-proposal-class-properties": "^7.7.4",
   "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
   "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
   "@babel/plugin-proposal-optional-chaining": "^7.10.4",
   "@babel/preset-env": "^7.7.4",
   "@babel/preset-react": "^7.7.4",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "22.4.3",
   "babel-loader": "^8.2.2",
   "core-js": "3",
   "cross-env": "5.0.5",
   "css-loader": "^3.2.0",
   "dotenv": "4.0.0",
   "enzyme": "^3.3.0",
   "enzyme-adapter-react-16": "1.1.1",
   "enzyme-to-json": "^3.4.3",

Old babel.rc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "emotion"
  ]
}

New babel.rc

{
  "presets": [
    ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": "3.6"
    }],
    "@babel/preset-react"
  ],

webpackConfig.js

// config.entry = ['@babel/polyfill', './src/app.js'] <-- removed after installation of core-js
 config.entry = ['./src/app.js']
 
 config.module = {
   rules: [
   {
     test: /\.(js|jsx)$/,
     exclude: [
       /node_modules/,
       /firebase-functions/,
       /tests/
     ],
     use: {
       loader: 'babel-loader'
     }
   },  
//...
return config

我无法弄清楚错误的来源。我的配置有什么问题？

亲切的问候/K

Answer 1

通过降级到 Yarn 1.22.5 并更新我的配置，我成功地再次运行 webpack-dev-server。

babel.rc

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": "3.6"
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "emotion"
  ]
}

webpack.config.js

config.entry = ['./src/app.js']
//...
config.module = {
  rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: [
      /node_modules/,
      /firebase-functions/,
      /tests/
    ],
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/react', '@babel/preset-env']
      }
    }
  },

//...
return config

package.json

"devDependencies": {
  "@babel/cli": "^7.7.4",
  "@babel/core": "^7.7.4",
  "@babel/plugin-proposal-class-properties": "^7.7.4",
  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
  "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
  "@babel/plugin-proposal-optional-chaining": "^7.10.4",
  "@babel/plugin-transform-runtime": "^7.12.1",
  "@babel/preset-env": "^7.7.4",
  "@babel/preset-react": "^7.7.4",
  "@babel/runtime": "^7.12.5",
  "babel-jest": "22.4.3",
  "babel-loader": "^8.2.2",

感谢 chenxsan 为我指明了正确的方向！

/K

Webpack 和 Babel - nodejs 和 yarn 更新后无法运行 dev-server

Webpack & Babel - Unable to run dev-server after nodejs and yarn update

javascript

reactjs

webpack

babeljs

yarnpkg-v2

Webpack 和 Babel - nodejs 和 yarn 更新后无法 运行 dev-server

Webpack & Babel - Unable to run dev-server after nodejs and yarn update

javascript

reactjs

webpack

babeljs

yarnpkg-v2

Webpack 和 Babel - nodejs 和 yarn 更新后无法运行 dev-server