webpack: 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!

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 24
  • Comments: 23

Commits related to this issue

Most upvoted comments

@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, … }

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

Look like the problem is in the newest version of webpack dev server https://github.com/webpack/webpack-dev-server/issues/1259

Thanks @ZeroX-DG just downgraded webpack-dev-server to v2.9.7. Works great now!

Problem solved with npm install webpack-dev-server@2.9.7 --save-dev

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.

For those who still stuck on this issue even after changing their version of node and npm, adding this line in my hosts file has solved the problem: 127.0.0.1 localhost