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

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

I noticed you use windows as your development env. I suggest you use [wsl](https://learn.microsoft.com/en-us/windows/wsl/about). Development in windows always cause some strange errors, and not easy to resolve. — blastz, Aug 30 '19 at 09:42

score 3 · Answer 1 · answered Dec 23 '20 at 23:25

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

score 2 · Answer 2 · answered Jun 19 '21 at 09:27

2

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

answered Jun 19 '21 at 09:27

Shruthi Gowda

41
2

score 1 · Answer 3 · answered Feb 28 '20 at 21:28

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

score 1 · Answer 4 · answered Jan 02 '21 at 18:54

1

Try the following. Its worked for me

"scripts": { "lint": "eslint ./", "build": "webpack", "dev": "webpack serve" },

answered Jan 02 '21 at 18:54

Kasun Vimukthi

11
1

Ons Jannet · Answer 5 · 2021-06-29T17:13:13.210

1

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

edited Jun 29 '21 at 17:13

answered Jun 29 '21 at 07:02

Ons Jannet

177
2
2
10

Please add the code in a code block for better readability. – Anirban Saha Jun 29 '21 at 08:32

score 0 · Answer 6 · answered Aug 30 '19 at 09:41

0

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!

answered Aug 30 '19 at 09:41

All my ```webpack``` ,```webpack-cli```,```webpack-dev-server``` are the latest version. – Jessie Aug 31 '19 at 05:39
Can you please install dev server via this command. `npm i webpack-dev-server@latest` – Aug 31 '19 at 13:56

score 0 · Answer 7 · answered Jul 13 '21 at 09:13

0

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

answered Jul 13 '21 at 09:13

webexpert3333

1

score 0 · Answer 8 · answered Jul 29 '21 at 08:12

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.

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

8 Answers8