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._pile (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"
  }
}

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._pile (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"
  }
}

• javascript
• reactjs

• 1 Do you have webpack-cli installed? If not, try npm i -D webpack-cli. – Tholle Commented Aug 11, 2018 at 12:29
• No, I haven't installed. – chk.buddi Commented Aug 11, 2018 at 12:36
• 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 Commented Aug 11, 2018 at 12:37
• 1 You most likely have a new version of Webpack installed with an old configuration. Change configuration.module.loaders to configuration.module.rules. – Tholle Commented Aug 11, 2018 at 12:40
• 1 It was solved once I changed to configuration.module.rules.Thank you very much – chk.buddi Commented Aug 11, 2018 at 13:14

3 Answers 3

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

 webpack-dev-server --...

to same code mand with

webpack serve --...

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.

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"