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

Question

I am upgrading Node.js from 8.11.1 to 12.20.0 and yarn from 1.22.4 to 2.4.0. My webpack version is 4.41.2.

I have upgraded Node.js using nvm and by running the commands below and then updated babel.rc

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

I run my dev server by invoking "dev-server": "cross-env NODE_ENV=development webpack-dev-server --host 127.0.0.1 --port 8080" When trying to run my dev server () I get the below errors

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 ...

I have tried to install babel-loader in "Dependencies" with the same result.

Why cannot babel-loader be resolved?

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

I cannot figure out where the error origins from. What is wrong with my config?

Kind regards /K

Answer 1

By downgrading to Yarn 1.22.5 and updating my config I successfully managed to run the webpack-dev-server again.

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",

Thanks to chenxsan for pointing me in the right direction!

/K