Bug with webpack-dev-server 2.10.0 - Unable to start webpack-dev-server

Anyone else getting these error messages after running npm start when initing webpack project? 😕

$ npm start

> vue-webpack-project@1.0.0 start /path/to/project
> npm run dev


> vue-webpack-project@1.0.0 dev /path/to/project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.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-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
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-webpack-project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-webpack-project@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!     /path/to/error/log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-webpack-project@1.0.0 start: `npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-webpack-project@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!     /path/to/error/logs

Npm logs output:

0 info it worked if it ends with ok
1 verbose cli [ '/path/to/node',
1 verbose cli   '/path/to/node',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@5.6.0
3 info using node@v8.9.1
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle vue-webpack-project@1.0.0~predev: vue-webpack-project@1.0.0
6 info lifecycle vue-webpack-project@1.0.0~dev: vue-webpack-project@1.0.0
7 verbose lifecycle vue-webpack-project@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle vue-webpack-project@1.0.0~dev: PATH: $PATH
9 verbose lifecycle vue-webpack-project@1.0.0~dev: CWD: /path/to/project
10 silly lifecycle vue-webpack-project@1.0.0~dev: Args: [ '-c',
10 silly lifecycle   'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ]
11 silly lifecycle vue-webpack-project@1.0.0~dev: Returned: code: 1  signal: null
12 info lifecycle vue-webpack-project@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: vue-webpack-project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/path/to/node)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/path/to/spawn:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid vue-webpack-project@1.0.0
15 verbose cwd /path/to/project
16 verbose Darwin 17.3.0
17 verbose argv "/path/to/node" "/path/to/npm" "run" "dev"
18 verbose node v8.9.1
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error vue-webpack-project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
22 error Exit status 1
23 error Failed at the vue-webpack-project@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Node version

$ node -v

v8.9.1

Webpack and webpack-dev-server works fine in other projects locally. Pretty stumped on this issue. Thanks!

[CocoChen917]

@NigelEarle @ZeroX-DG run this command in my project works great too,Thanks!!! npm install webpack-dev-server@2.9.7 --save-dev and change webpack.dev.conf.js devServer options

devServer:{ inline:false, … }

[ZeroX-DG]

The problem is in the newest version of webpack dev server (2.10.0) See: https://github.com/webpack/webpack-dev-server/issues/1259

Right now a simple work around solution is to downgrade to an older version of webpack dev server using the command

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

Or if you’re using yarn

yarn add -D webpack-dev-server@2.9.7