How to fix : Cannot find module 'webpack/bin/config-yargs' - reactjs

Question

I've running npm run dev command to run my react app. BUT then it pops up this Error: Cannot find module 'webpack/bin/config-yargs'. I've googled this error. Many people who solve this error tell me to install webpack and webpack-cli. Therefore, I went to install webpack and webpack-cli. However, the error still pops up. PLEASE HELP!
I've tried several solution, such as this
Cannot find module 'webpack/bin/config-yargs'
and this
How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs?
NOW I've installed webpack and webpack-cli.
My cmd
C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master>npm run dev
> truffle-init-webpack#0.0.2 dev C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master
> webpack-dev-server
internal/modules/cjs/loader.js:613
throw err;
^
Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
at Function.Module._load (internal/modules/cjs/loader.js:526:27)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:824:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! truffle-init-webpack#0.0.2 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the truffle-init-webpack#0.0.2 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2019-08-30T09_10_59_739Z-debug.log
My package.json
{
"name": "truffle-init-webpack",
"version": "0.0.2",
"description": "Frontend example using truffle v3",
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.26.3",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^3.2.0",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.11",
"web3": "^0.20.7",
"webpack": "^4.0.0",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^2.11.5"
},
"dependencies": {
"ajv": "^5.5.2",
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"ipfs-api": "^19.0.0",
"jquery": "^3.4.1",
"node-sass": "^4.8.3",
"popper.js": "^1.15.0",
"postcss-loader": "^2.1.6",
"precss": "^3.1.2",
"sass-loader": "^6.0.7"
}
}

Answer 1

I had the same problem and it was because the webpack version was not stable
I used the lower version and the problem was solved
npm install webpack#4.32.2 --save-dev
npm install webpack-cli#3.3.2 --save-dev
npm install webpack-dev-server#3.5.1 --save-dev

Answer 2

In your package.json file just change "dev": "webpack-dev-server" to "dev": "webpack serve"

Answer 3

If you have the error for the issues described here: https://github.com/webpack/webpack-dev-server/issues/2029
I wrote a python script to fix the problem until it's patched.
You can just add the command to your package.json script after adding the file to your project (assuming you have python installed).
https://github.com/bigbizze/FixWebPackError-Cannot-find-module-webpack-cli-bin-config-yargs

Answer 4

Try the following. Its worked for me
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack serve"
},

Answer 5

I had the same problem, try npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge

Answer 6

I think it's related to webpack version only. Can you please update the webpack, webpack-cli and webpack-dev-server with latest version and check it.
Hope this will work for you!

Answer 7

in package.json
use "dev":"webpack serve" instead of "webpack-dev-server"

Answer 8

Don't play with the webpack module for a while you are learning because it is tricky to do this stuff.
I have the same problem that you listed before
// change your mode to development in package.json
// make everything in devDependencies
{
"name": "timer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
...
}
}
In your webpack.config
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
}
This may work for you.