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

[NigelEarle]

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!

[ZeroX-DG]

I'm having the same problem too !

[ZeroX-DG]

Look like the problem is in the newest version of webpack dev server
webpack/webpack-dev-server#1259

[lsbyerley]

I too am getting this same error. Was working fine a few days ago

[NigelEarle]

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

[justleolee]

I'm having the same problem too ! !!!!!!!!!!!!!!!

[meetflyings]

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

[NovoManu]

@CocoChen917 Thanks!

[chabanov]

Someone found a solution to the problem?

[ZeroX-DG]

The problem is in the newest version of webpack dev server (2.10.0)
See: webpack/webpack-dev-server#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

[srihari-sridharan]

I am facing the same issue. Please post a solution once it is available. Thanks.

[ZeroX-DG]

The problem have been resolved, you can now upgrade to the newest version of webpack (2.10.1).
See: webpack/webpack-dev-server#1259

[loicsalzmann]

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

[khalilst]

sudo npm run serve worked for me in vue-cli 3.0.5

[takaroo]

thank you, this helped

[JoeFu]

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

[gspiller67]

This worked like a charm! Thank you!

[jecker7]

Still getting this issue with the latest version of webpack-dev-server and no luck after downgrading to webpack-dev-server 2.9.7 or with any fixes shown above.

log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@6.4.1
3 info using node@v11.11.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle bioplate@1.0.0predev: bioplate@1.0.0
6 info lifecycle bioplate@1.0.0dev: bioplate@1.0.0
7 verbose lifecycle bioplate@1.0.0dev: unsafe-perm in lifecycle true
8 verbose lifecycle bioplate@1.0.0dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/usr/home/test/BioPlate/app/client/node_modules/.bin:/sbin:/bin:/usr/sbin:/usr/bin:/usr/local/sbin:/usr/local/bin:/root/bin
9 verbose lifecycle bioplate@1.0.0dev: CWD: /usr/home/test/BioPlate/app/client
10 silly lifecycle bioplate@1.0.0dev: Args: [ '-c',
10 silly lifecycle 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ]
11 silly lifecycle bioplate@1.0.0dev: Returned: code: 1 signal: null
12 info lifecycle bioplate@1.0.0dev: Failed to exec dev script
13 verbose stack Error: bioplate@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. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:197:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:197:13)
13 verbose stack at maybeClose (internal/child_process.js:984:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid bioplate@1.0.0
15 verbose cwd /usr/home/test/BioPlate/app/client
16 verbose FreeBSD 12.0-RELEASE-p3
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v11.11.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error bioplate@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 bioplate@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 ]

[DobroAlex]

Still an issue, but #1229 (comment) helped

[yasmineTYM]

Try unset HOST, this one helps me

[MohammadShakilCSE]

C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\cli.js:93
throw err;
^

ReferenceError: options is not defined
at Object. (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\webpack.config.js:48:26)
at Module._compile (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach ()
at module.exports (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\cli.js:71:45
at Object.parse (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
at C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\cli.js:49:8
at Object. (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (C:\Users\Shakil Talukder\Desktop\bootsratp-webpack\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bootsratp-webpack@1.0.0 build: webpack
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bootsratp-webpack@1.0.0 build 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\Shakil Talukder\AppData\Roaming\npm-cache_logs\2020-05-24T18_35_18_165Z-debug.log

[MohammadShakilCSE]

i face problem reload webpack live server

[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.

[NathanBrews]

Tejas100 we have a subsequent issue.

front@1.0.0 dev C:\Users\nattn\Desktop\fingz\front
webpack serve --mode development --env development

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\nattn\Desktop\fingz\front
i ｢wdm｣: asset main.js 429 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 377 KiB
modules by path ./node_modules/axios/ 41.3 KiB 27 modules
modules by path ./node_modules/webpack-dev-server/client/
20.9 KiB 10 modules
modules by path ./node_modules/html-entities/lib/.js 61 KiB 5 modules
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/.js 4.51 KiB 3 modules
modules by path ./src/ 2.89 KiB
modules by path ./src/screens/.js 1.88 KiB 3 modules
modules by path ./src/.js 1.01 KiB
./src/index.js 791 bytes [built] [code generated]
./src/utils.js 245 bytes [built] [code generated]
webpack 5.37.1 compiled successfully in 553 ms
i ｢wdm｣: Compiled successfully.

for some reason

webpack serve --mode development --env development

wont render the frontend script now that data.js has been moved to backend?