version 2.10.0 throw error

[smackgg]

• Operating System: MacOs
• Node Version: 9.2.0
• NPM Version: 4.5.0
• webpack Version: 3.10.0
• webpack-dev-server Version: 2.10.0

• This is a bug
• This is a modification request

Code

  // webpack.config.js
const path = require('path');
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    host: '0.0.0.0',
    publicPath: '/',
    contentBase: './dist',
  },
  devtool: 'source-map',
}

  // package.json 
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

Expected Behavior

good running

Actual Behavior

It will throw the error when update to version 2.10.0. Before 2.9.3 no this error.

For Bugs; How can we reproduce the behavior?

// Error:

npm run dev

> test@1.0.0 dev /Users/***/Documents/my/test
> webpack-dev-server ./webpack.config.js

webpack-dev-server 2.10.0
webpack 3.10.0
Usage: https://webpack.js.org/configuration/dev-server/

Config options:
  --config       Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --config-name  Name of the config to use                              [string]
  --env          Environment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                       [string] [default: The current directory]
  --entry      The entry point                                          [string]
  --watch, -w  Watch the filesystem for changes                        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"                       [boolean]
  --progress   Print compilation progress in percentage                [boolean]

Module options:
  --module-bind       Bind an extension to a loader                     [string]
  --module-bind-post                                                    [string]
  --module-bind-pre                                                     [string]

Output options:
  --output-path                 The output path for compilation assets
                                       [string] [default: The current directory]
  --output-filename             The output filename of the bundle
                                                   [string] [default: [name].js]
  --output-chunk-filename       The output filename for additional chunks
       [string] [default: filename with [id] instead of [name] or [id] prefixed]
  --output-source-map-filename  The output filename for the SourceMap   [string]
  --output-public-path          The public path for the assets          [string]
  --output-jsonp-function       The name of the jsonp function used for chunk
                                loading                                 [string]
  --output-pathinfo             Include a comment with the request for every
                                dependency (require, import, etc.)     [boolean]
  --output-library              Expose the exports of the entry point as library
                                                                        [string]
  --output-library-target       The type for exposing the exports of the entry
                                point as library                        [string]

Advanced options:
  --records-input-path       Path to the records file (reading)         [string]
  --records-output-path      Path to the records file (writing)         [string]
  --records-path             Path to the records file                   [string]
  --define                   Define any free var in the bundle          [string]
  --target                   The targeted execution environment         [string]
  --cache                    Enable in memory caching
                      [boolean] [default: It's enabled by default when watching]
  --watch-stdin, --stdin     close when stdin ends                     [boolean]
  --watch-aggregate-timeout  Timeout for gathering changes while watching
  --watch-poll               The polling interval for watching (also enable
                             polling)                                   [string]
  --hot                      Enables Hot Module Replacement            [boolean]
  --prefetch                 Prefetch this request (Example: --prefetch
                             ./file.js)                                 [string]
  --provide                  Provide these modules as free vars in all modules
                             (Example: --provide jQuery=jquery)         [string]
  --labeled-modules          Enables labeled modules                   [boolean]
  --plugin                   Load this plugin                           [string]
  --bail                     Abort the compilation on first error
                                                       [boolean] [default: null]
  --profile                  Profile the compilation and include information in
                             stats                     [boolean] [default: null]
  --hot-only                 Do not refresh page if HMR fails          [boolean]

Resolving options:
  --resolve-alias         Setup a module alias for resolving (Example:
                          jquery-plugin=jquery.plugin)                  [string]
  --resolve-extensions    Setup extensions that should be used to resolve
                          modules (Example: --resolve-extensions .es6,.js)
                                                                         [array]
  --resolve-loader-alias  Setup a loader alias for resolving            [string]

Optimizing options:
  --optimize-max-chunks      Try to keep the chunk count below a limit
  --optimize-min-chunk-size  Try to keep the chunk size above a limit
  --optimize-minimize        Minimize javascript and switches loaders to
                             minimizing                                [boolean]

Stats options:
  --color, --colors   Enables/Disables colors on the console
                                           [boolean] [default: (supports-color)]
  --info              Info                             [boolean] [default: true]
  --quiet             Quiet                                            [boolean]
  --client-log-level  Log level in the browser (info, warning, error or none)
                                                      [string] [default: "info"]

SSL options:
  --https           HTTPS                                              [boolean]
  --key             Path to a SSL key.                                  [string]
  --cert            Path to a SSL certificate.                          [string]
  --cacert          Path to a SSL CA certificate.                       [string]
  --pfx             Path to a SSL pfx file.                             [string]
  --pfx-passphrase  Passphrase for pfx file.                            [string]

Response options:
  --content-base          A directory or URL to serve HTML content from.[string]
  --watch-content-base    Enable live-reloading of the content-base.   [boolean]
  --history-api-fallback  Fallback to /index.html for Single Page Applications.
                                                                       [boolean]
  --compress              Enable gzip compression                      [boolean]

Connection options:
  --port                The port
  --disable-host-check  Will not check the host                        [boolean]
  --socket              Socket to listen
  --public              The public hostname/ip address of the server    [string]
  --host                The hostname/ip address the server will bind to
                                                 [string] [default: "localhost"]
  --allowed-hosts       A comma-delimited string of hosts that are allowed to
                        access the dev server                           [string]

Options:
  --help, -h    Show help                                              [boolean]
  --version     Show version number                                    [boolean]
  --bonjour     Broadcasts the server via ZeroConf networking on start [boolean]
  --lazy        Lazy                                                   [boolean]
  --inline      Inline mode (set to false to disable including client scripts
                like livereload)                       [boolean] [default: true]
  --open        Open the default browser, or optionally specify a browser name
                                                                        [string]
  --useLocalIp  Open default browser with local IP                     [boolean]
  --open-page   Open default browser with the specified page            [string]

Missing argument values: config, config-name, context, entry, module-bind, module-bind-post, module-bind-pre, output-path, output-filename, output-chunk-filename, output-source-map-filename, output-public-path, output-jsonp-function, output-library, output-library-target, records-input-path, records-output-path, records-path, define, target, watch-aggregate-timeout, devtool, resolve-alias, resolve-extensions, resolve-loader-alias, optimize-max-chunks, optimize-min-chunk-size, prefetch, provide, plugin, open-page

If you have the same error

Downgrade to 2.9.7 temporarily.

npm install --save-dev webpack-dev-server@2.9.7

[emodo]

+1

[ganesharulanantham]

Same issue, Never realised it is related the version upgrade

[emodo]

@ganesharulanantham Me too, it took me lots of time to figure out

[avaleriani]

Same error here, was working before update.

[l0gicgate]

Same issue. Config has not changed. Please fix

[sricc]

Same. v2.9.7 is working fine for me.

[AjiMIde]

Same error here, was working before update. Use vue-cli to build a new project but......

[jpamorgan]

Same here! Still haven't been able to resolve the issue

[JackSoby]

having the same issue

[subramn]

Same issue for me as well

[vanessapr]

Same error!, I am using v2.9.7 instead v2.10.

[kylecombes]

This is an issue on Ubuntu 16.04 as well.

[brettstack]

"Same here" comments are not helpful. Please just +1 the issue. If you want to be notified of updates, click the "Subscribe" button to the right.

[ArtOfCode-]

Hit this issue too. Moving back to 2.4.5 is a temporary fix; all higher versions that I've tried have been affected.

[ghost]

Is anyone here using yarn? Found a good ol' removal of node_modules and an npm install did the trick

[ArtOfCode-]

@readeujet I am; tried that with no dice.

[l0gicgate]

@readeujet that doesn't work for me either.
@ArtOfCode- Rolling back to 2.9.7 works at the moment.

[strausd]

Same issue running yarn on Windows 10. Tried deleting node_modules and running yarn install as mentioned previously, but that did not work. Downgrading to 2.9.7 worked for me.

[chetanraj]

installing node modules from yarn is the issue, did npm i it worked.

[FourwingsY]

in my case, installing from yarn worked, but from npm throws error.

[jinyun]

Both yarn and npm can not worked for me , downgrading to 2.9.7
node:v8.9.3
os: ubuntu1604

[orangeyyy]

I have got the same issue ++1

[sidlynx]

I got the same problem.I'm using version 2.9.2.node version 8.9.4 on ubuntu 16.tried both npm and yarn I still have the same issue

[Tankpt]

I have got the same issue

[jovanNajdic]

Same problem. I'm using v2.9.1, node v9.3.0, windows 10. Tried both npm and yarn.

worked:
npm install webpack-dev-server@2.9.7 --save-dev
and inline:false

[DanielQuero]

Edit: @guohui8 Solution worked for me (npm install webpack-dev-server@2.9.7 --save-dev). At least until they fixed it.

How did you roll back to that version?

PS: Same Issue on Arch-Linux

[chabanov]

Someone found a solution to the problem?

[guohui8]

I have solved this problem by this command:
npm install webpack-dev-server@2.9.7 --save-dev

[sebtoun]

specifically commit 00e8500 introduce the bug and even more specifically changing yargs dep from 6.6.0 to 10.0.3

[shellscape]

To everyone on this issue who replied "me too" - this is not said to be rude, and I say this with ❤️ -
github reactions have been around for nearly two years now (https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments) specifically to combat the "me too," "same issue" replies. Adding those replies to an issue does nothing but make it harder for maintainers to read legitimate information added to the issue by other users. In short, you're hurting the issue more than helping. You should know better by now.

We've locked this issue to prevent further flooding in of those kinds of comments. That said, we're working on resolving the problem today.

[shellscape]

yargs has been rolled back to v6.6.0 in webpack-dev-server@2.10.1. Issue is resolved. We'll look into the breakages of that dependency update and issue a patch once an upgrade path is found.

[shellscape]

Also just added a test to make sure that this dependency doesn't get updated again. It's bit us a few times in the past. Tests will now fail (preventing publish) if that is updated again. Perhaps at some point in the future we'll move away from yargs to something more minimal.

[csvan]

Confirming that this is a yargs issue. For us it happened when moving from "~10.0.3" to "~10.1.1" on webpack 3.10.

[quanzhiyuan]

mark

[ImCharmainejoy]

Operating System: Windows
Node Version: 8.9.4
NPM Version: 6.5.0
webpack Version: 3.6.0
webpack-dev-server Version: 2.9.0

i'm having the same problem of
cannot destructure property compile of 'undefined' or 'null'
and my solution is at @smackgg
with this command: npm install --save-dev webpack-dev-server@2.9.7

Thank you so much .

[Sussexdba]

PS C:\Users\Xxx\Desktop\9-forkify> npm run dev

forkify@1.0.0 dev C:\Users\Apollo\Desktop\9-forkify
webpack --mode development

webpack 2.7.0
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack []
Usage with config file: webpack

Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--env Environment passed to the config, when it is a function

Basic options:
--context The root directory for resolving entry point and stats
[string] [default: The current directory]
--entry The entry point [string]
--watch, -w Watch the filesystem for changes [boolean]
--debug Switch loaders to debug mode [boolean]
--devtool Enable devtool for better debugging experience (Example:
--devtool eval-cheap-module-source-map) [string]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
process.env.NODE_ENV="production" [boolean]
--progress Print compilation progress in percentage [boolean]

Module options:
--module-bind Bind an extension to a loader [string]
--module-bind-post [string]
--module-bind-pre [string]

Output options:
--output-path The output path for compilation assets
[string] [default: The current directory]
--output-filename The output filename of the bundle
[string] [default: [name].js]
--output-chunk-filename The output filename for additional chunks
[string] [default: filename with [id] instead of [name] or [id] prefixed]
--output-source-map-filename The output filename for the SourceMap [string]
--output-public-path The public path for the assets [string]
--output-jsonp-function The name of the jsonp function used for chunk
loading [string]
--output-pathinfo Include a comment with the request for every
dependency (require, import, etc.) [boolean]
--output-library Expose the exports of the entry point as library
[string]
--output-library-target The type for exposing the exports of the entry
point as library [string]

Advanced options:
--records-input-path Path to the records file (reading) [string]
--records-output-path Path to the records file (writing) [string]
--records-path Path to the records file [string]
--define Define any free var in the bundle [string]
--target The targeted execution environment [string]
--cache Enable in memory caching
[boolean] [default: It's enabled by default when watching]
--watch-stdin, --stdin Exit the process when stdin is closed [boolean]
--watch-aggregate-timeout Timeout for gathering changes while watching
--watch-poll The polling interval for watching (also enable
polling) [boolean]
--hot Enables Hot Module Replacement [boolean]
--prefetch Prefetch this request (Example: --prefetch
./file.js) [string]
--provide Provide these modules as free vars in all modules
(Example: --provide jQuery=jquery) [string]
--labeled-modules Enables labeled modules [boolean]
--plugin Load this plugin [string]
--bail Abort the compilation on first error [boolean]
--profile Profile the compilation and include information in
stats [boolean]

Resolving options:
--resolve-alias Setup a module alias for resolving (Example:
jquery-plugin=jquery.plugin) [string]
--resolve-extensions Setup extensions that should be used to resolve
modules (Example: --resolve-extensions .es6 .js)
[array]
--resolve-loader-alias Setup a loader alias for resolving [string]

Optimizing options:
--optimize-max-chunks Try to keep the chunk count below a limit
--optimize-min-chunk-size Try to keep the chunk size above a limit
--optimize-minimize Minimize javascript and switches loaders to
minimizing [boolean]

Stats options:
--color, --colors Enables/Disables colors on the console
[boolean] [default: (supports-color)]
--sort-modules-by Sorts the modules list by property in module
[string]
--sort-chunks-by Sorts the chunks list by property in chunk[string]
--sort-assets-by Sorts the assets list by property in asset[string]
--hide-modules Hides info about modules [boolean]
--display-exclude Exclude modules in the output [string]
--display-modules Display even excluded modules in the output
[boolean]
--display-max-modules Sets the maximum number of visible modules in
output [number]
--display-chunks Display chunks in the output [boolean]
--display-entrypoints Display entry points in the output [boolean]
--display-origins Display origins of chunks in the output [boolean]
--display-cached Display also cached modules in the output[boolean]
--display-cached-assets Display also cached assets in the output [boolean]
--display-reasons Display reasons about module inclusion in the
output [boolean]
--display-depth Display distance from entry point for each module
[boolean]
--display-used-exports Display information about used exports in modules
(Tree Shaking) [boolean]
--display-provided-exports Display information about exports provided from
modules [boolean]
--display-error-details Display details about errors [boolean]
--verbose Show more details [boolean]

Options:
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
--json, -j Prints the result as JSON. [boolean]

Unknown argument: mode
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! forkify@1.0.0 dev: webpack --mode development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the forkify@1.0.0 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\Apollo\AppData\Roaming\npm-cache_logs\2019-09-04T03_38_26_243Z-debug.log
PS C:\Users\Xxx\Desktop\9-forkify>

Still need help on this, above solutions didn’t help

[alextes]

@coolapollo you're necro-bumping on a closed issue with many participants. It happens. It's fine, but try not to do it 😉 .
See this description of necro bumping if you'd like a more detailed explanation. It has suggestions on what to do instead too 👌 .

[tejas100]

Solved Here Solved on 14 May 2021

First of all, you have installed webpack, webpack-cli and webpack-dev-server the wrong way. You made them dependencies and not devDependencies. To change that, uninstall them:

npm uninstall webpack webpack-cli webpack-dev-server

and then install them properly:

npm install webpack webpack-cli webpack-dev-server --save-dev

And I found a solution that adding a new script or in your Start Script in package.json worked for me. So you can try this way as well.

"scripts": { 
"dev": "webpack serve --mode development --env development"
}

And add this snippet in your webpack.config.js file [ contentBase is directory of your index.html file ].

module.exports = {
   devServer : {
          contentBase : __dirname + '/public',
          inline : false,
      },
 }

Finally run this on your terminal

npm run dev

If you have any queries then reply to this comment.