How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs?

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

Do you have `webpack-cli` installed? If not, try `npm i -D webpack-cli`. — Tholle, Aug 11 '18 at 12:29
After installing, it throws this error:x ?wds?: Invalid configuration object. Webpack has been initialised using a configuration object tha t does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: — chk.buddi, Aug 11 '18 at 12:37
You most likely have a new version of Webpack installed with an old configuration. Change `configuration.module.loaders` to `configuration.module.rules`. — Tholle, Aug 11 '18 at 12:40
It was solved once I changed to configuration.module.rules.Thank you very much — chk.buddi, Aug 11 '18 at 13:14

score 3 · Answer 1 · answered Jan 15 '21 at 23:02

3

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

 webpack-dev-server --...

to same code command with

webpack serve --...

answered Jan 15 '21 at 23:02

ironCat

161
6

score 2 · Accepted Answer · answered Aug 11 '18 at 13:16

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.

score 0 · Answer 3 · answered Nov 24 '20 at 17:31

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:

"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.5.1"

How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs?

3 Answers3

Linked