如何解决 reactjs 中的“找不到模块 'webpack-cli/bin/config-yargs' 错误？

Question

When I run my first hello world react example, I got the following error. How do I solve this?

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (.\ReactJS\node_modules\webpack-dev-server\bin\webpack-dev-server.
js:65:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

package.json file:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.16.5",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "start": "^5.1.0"
  }
}

Answer 1

2021 - the error is again actual. After upgrade to webpack 5 just replace the

 webpack-dev-server --...

to same code command with

webpack serve --...

Answer 2

The error is telling you that you don't have webpack-cli installed. You can install it and add it to your dev dependencies.

npm i -D webpack-cli

You also have a new version of Webpack installed with an outdated configuration object. If you change configuration.module.loaders to configuration.module.rules it will work.

Answer 3

The reason was the versions of these libraries : — webpack , webpack-cli and webpack-dev-server. I fount out that the versions I used couldn't work together. So I reinstall them and used the older versions which are:

1. "webpack": "^4.32.2",
2. "webpack-cli": "^3.3.2",
3. "webpack-dev-server": "3.5.1"