webpack-dev-server
webpack-dev-server copied to clipboard
webpack
Weird incompatibility with config package
I've been running into this annoying little issue. In reducing it down to a test case, I'm pretty sure this is a bug with webpack-dev-server but I'm at a loss of what exactly is the problem.
- Operating System:
Windows 10 - Node Version:
v8.11.2 - NPM Version:
5.6.0 - webpack Version:
4.17.2 - webpack-dev-server Version:
3.1.8
- [x] This is a bug
- [ ] This is a modification request
Code
Test case: https://github.com/cinderblock/test-broken-webpack
Expected Behavior
webpack-dev-server starts normally when using the package config to specify devServer options in webpack.config.js.
Actual Behavior
TypeError when run:
test-broken-webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js:304
options.port = argv.port === DEFAULT_PORT
^
TypeError: Cannot assign to read only property 'port' of object '#<Object>'
at processOptions (C:\Users\Cameron\git\test-broken-webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js:304:16)
at Object.<anonymous> (C:\Users\Cameron\git\test-broken-webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js:424:1)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
How can we reproduce the behavior?
Follow readme instructions of https://github.com/cinderblock/test-broken-webpack
Experiments
Values passed to devServer are what I expect
Inspecting the value of x before & after it is manually assigned to a static value indicates that the object loaded from config.get(...) is the expected shape.
Remove "weird" code
The stack trace points to a small segment of webpack-dev-server.js which, if removed, makes the error go away:
options.port = argv.port === DEFAULT_PORT
? defaultTo(options.port, argv.port)
: defaultTo(argv.port, options.port);
Interestingly, this snippet is called out in comments above it as being "weird".
Strict mode
Some articles online suggest this TypeError is only possible to produce when running in strict mode. If you remove 'use strict'; from the top of webpack-dev-server.js, it compiles and seems to run fine.
@cinderblock we should use:
const options = Object.assign({}, config.devServer || firstWpOpt.devServer);
to avoid this problem, but it can break other setup in theory, we can fix it in next major release.
/cc @michael-ciniawsky
