webpack-dev-server: Error: Cannot find module 'webpack-cli/bin/config-yargs'

  • Operating System: Mac OS

  • Node Version: 10.15.1

  • NPM Version: 6.4.1

  • webpack Version: 4.34.0

  • webpack-dev-server Version: 3.2.1

  • This is a bug…?

  • This is a modification request

Code

// webpack.config.js
const path = require('path');
const config = require('./webpack.dev.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const newConfig = Object.assign({}, config);

newConfig.entry = ['@babel/polyfill', './app/features/Certifications/index', 'webpack/hot/only-dev-server'];

newConfig.output = {
  filename: 'webpack-certifications-bundle.js',
  path: path.resolve('../app/assets/webpack'),
  publicPath: '/',
};

newConfig.devServer = {
  historyApiFallback: true,
  hot: true,
  open: true,
  openPage: 'dashboard',
  port: 9000,
  proxy: {
    '/api': {
      target: 'http://localhost:9010',
      secure: false,
    },
  },
  publicPath: '/',
};

newConfig.plugins.push(new HtmlWebpackPlugin());

module.exports = newConfig;
module.exports.devtool = 'cheap-module-eval-source-map';

// package.json
scripts: {
  "dev:cert:webpack": "NODE_ENV=development webpack-dev-server --config webpack.dev.certifications.config.js"
}

Expected Behavior

Running npm run dev:cert:webpack starts webpack dev server.

Actual Behavior

~/src/projects/client$ npm run dev:cert:webpack

> acl-project-manager@0.0.1 dev:cert:webpack /Users/jamie/src/projects/client
> NODE_ENV=development webpack-dev-server --config webpack.config.js

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/jamie/src/projects/client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:77:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! acl-project-manager@0.0.1 dev:cert:webpack: `NODE_ENV=development webpack-dev-server --config webpack.dev.certifications.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the acl-project-manager@0.0.1 dev:cert:webpack 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!     /Users/jamie/.npm/_logs/2019-06-14T23_23_20_044Z-debug.log

If I upgrade to webpack-dev-server 3.7.1, this error does not occur.

Thank you for your help.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 9
  • Comments: 46 (14 by maintainers)

Commits related to this issue

Most upvoted comments

Please use webpack serve for run webpack-dev-server

I ran into this issue after updating webpack-cli from:

webpack-cli ^3.2.1 → ^3.3.9

I fixed it by changing:

node_modules\webpack-dev-server\bin\webpack-dev-server.js

Line 84: require('webpack-cli/bin/config-yargs')(yargs); To: require('webpack-cli/bin/config/config-yargs')(yargs);

Line 92: const config = require('webpack-cli/bin/convert-argv')(yargs, argv, { To: const config = require('webpack-cli/bin/utils/convert-argv')(yargs, argv, {

This is broken again when using webpack-cli 4.0.0 (in beta). There’s only cli.js left inside webpack-cli/bin.

Need update webpack-cli to v4 (stable) and change webpack-dev-server bin in package.json on webpack serve:

Old:

package.json

{
  "scripts": {
    "serve": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.12"
  }
}

New:

package.json

{
  "scripts": {
    "serve": "webpack serve"
  },
  "devDependencies": {
    "webpack-cli": "^4.0.0"
  }
}

Please read my answer careful

webpack-dev-server@3.7.1 is OK.

webpack-dev-server@3.7.2 error: Cannot find module ‘yargs’

Same to me:

"webpack": "^5.0.0-rc.3",
"webpack-cli": "^4.0.0-rc.0",
"webpack-dev-server": "^3.11.0"

Works:

"webpack": "^5.0.0-rc.3",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

@evilebottnawi Your answer is somewhere in the middle of 20-30 replies to this issues. It’s nowhere in the README. The version didn’t change, but somehow the behaviour broke due to a release of an external lib?

Dependabot has bumped cli version for quite a number of projects, so expect a lot of people flocking to this issue and potentially missing a response.

The best way to solve this is just to add a line to the README:

NPM package.json scripts are a convenient and useful means to run locally installed binaries without having to be concerned about their full paths. Simply define a script as such:

+ For webpack-cli 3.x:
+
"scripts": {
  "start:dev": "webpack-dev-server"
}

+ For webpack-cli 4.x:
+
+ "scripts": {
+  "start:dev": "webpack serve"
+}

And run the following in your terminal/console:

use the webpack-3.3.12 version npm i webpack-cli@3.3.12 and it should work!

webpack-cli@4 this problem still exists run npm install -D webpack-cli@3 to solve it

Yes, we are working on bugs in webpack-cli, it will be improved after this

You use old webpack-cli version, please update webpack-cli

Fixed in #1754. Upgrade to webpack-dev-server 3.3.0 or higher.

running 3.3.12 resolved this for me.npm i webpack-cli@3.3.12

Hi All, having trouble with this as well.

> webpack-dev-server --mode development --open --hot

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactapp@1.0.0 start: `webpack-dev-server --mode development --open --hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the reactapp@1.0.0 start 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:

I changed the versions to recommended ones here, but the issue persists.

Just reporting that this is still broken.

   "webpack": "~4.44.2",
    "webpack-cli": "~4.0.0",
    "webpack-dev-middleware": "~3.7.2",
    "webpack-dev-server": "~3.11.0"

Do not upgrade to "webpack": "~4.44.2" yet, stay on "webpack-cli": "~3.3.12"

I had windows update today that prevented recognizing webpack and webpack-cli. After finishing the update and restarting PC the project recognized webpack and webpack-cli again.

webpack-dev-server --hot

internal/modules/cjs/loader.js:968 throw err; ^

Error: Cannot find module ‘webpack/bin/config-yargs’ Require stack:

  • C:\Users\Harsh Agarwal\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15) at Function.Module._load (internal/modules/cjs/loader.js:841:27) at Module.require (internal/modules/cjs/loader.js:1025:19) at require (internal/modules/cjs/helpers.js:72:18) at Object.<anonymous> (C:\Users\Harsh Agarwal\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) { code: ‘MODULE_NOT_FOUND’, requireStack: [ ‘C:\Users\Harsh Agarwal\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js’ ] } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! reactapp@1.0.0 start: webpack-dev-server --hot npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the reactapp@1.0.0 start 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\Harsh Agarwal\AppData\Roaming\npm-cache_logs\2020-09-19T03_56_55_540Z-debug.log

Kindly help me with this i cant find solution from past 3 days

npm i webpack-cli

running 3.3.12 resolved this for me.npm i webpack-cli@3.3.12

downgraded 4.x => 3.3.12, it’s work

I was trying to run yarn webpack-dev-server on an app running react-scripts. I forgot I had used create-react-app to bootstrap my app.

Running yarn start fixed the issue.

can’t thank you enough for your time 😉

Just change https://github.com/Loligplayer33/Portfolio-Website-2.0/blob/master/package.json#L29 to ^3.3.11, remove package-lock.json and run npm i again