Skip to content

webpack-dev-server is not compatible with the latest webpack 5 beta 14 #2453

@ryanelian

Description

@ryanelian
  • Operating System: Microsoft Windows [Version 10.0.18363.657]
  • Node Version: v12.16.1
  • NPM Version: 6.13.4
  • webpack Version: 5.0.0-beta.14
  • webpack-dev-server Version: 3.10.3
  • Browser: none
  • This is a bug
  • This is a modification request

Code

https://github.com/ryanelian/webpack-dev-server-bug2453

const webpack = require('webpack'); const WDS = require('webpack-dev-server'); const path = require('path'); const main = require.resolve('./src/index'); const config = { entry: { // new webpack 5 beta 14 features: // "Allow a entry description object for advanced entrypoint configuration" // https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.14 main: { import: [main], filename: 'bundle.js' } }, output: { path: path.join(__dirname, 'dist'), filename: 'bundle.[name].js' }, mode: 'development' }; const port = 38765; const wdsConfig = { hot: true, contentBase: false, port: port, headers: { 'Access-Control-Allow-Origin': '*' } }; // UNCOMMENT THESE LINES FOR SANITY CHECKING THE WEBPACK CONFIGURATION! //////////////////////////////////////////////////////////////////////// // webpack(config, (err, stats) => { // console.log('webpack build OK!'); // }); //////////////////////////////////////////////////////////////////////// // The following line causes invalid configuration: //////////////////////////////////////////////////////////////////////// WDS.addDevServerEntrypoints(config, wdsConfig); //////////////////////////////////////////////////////////////////////// // console.log(config); // console.log(config.entry); const compiler = webpack(config); const devServer = new WDS(compiler, wdsConfig); devServer.listen(port, 'localhost', err => { // noop });

Expected Behavior

No Error.

WDS should configure webpack configuration properly.

Actual Behavior

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.entry should be one of these: function | object { <key>: non-empty string | [non-empty string, ...] (should not have fewer than 1 item, should not have duplicate items) | object { import, dependOn?, filename?, library? } } (should not have fewer than 1 property) | non-empty string | [non-empty string, ...] (should not have fewer than 1 item, should not have duplicate items) -> The entry point(s) of the compilation. Details: * configuration.entry['main'].filename should be one of these: non-empty string | function -> Specifies the name of each output file on disk. You must **not** specify an absolute path here! The `output.path` option determines the location on disk the files are written to, filename is used solely for naming the individual files. Details: * configuration.entry['main'].filename should be a non-empty string. * configuration.entry['main'].filename should be an instance of function. at validate (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\schema-utils\2.6.4\node_modules\schema-utils\dist\validate.js:85:11) at validateSchema (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\5.0.0-beta.14_webpack@5.0.0-beta.14\node_modules\webpack\lib\validateSchema.js:36:2) at webpack (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\5.0.0-beta.14_webpack@5.0.0-beta.14\node_modules\webpack\lib\webpack.js:88:2) at Object.<anonymous> (D:\VS\VueHMR\wds-cli.js:48:18) at Module._compile (internal/modules/cjs/loader.js:1158:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10) at Module.load (internal/modules/cjs/loader.js:1002:32) at Function.Module._load (internal/modules/cjs/loader.js:901:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) at internal/main/run_main_module.js:18:47 

This is caused by improper configuration by WDS.addDevServerEntrypoints(config, wdsConfig); API:

{ "entry": { "main": { "import": [ "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack-dev-server\\3.10.3_webpack@5.0.0-beta.14\\node_modules\\webpack-dev-server\\client\\index.js?http://localhost:38765", "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack\\5.0.0-beta.14_webpack@5.0.0-beta.14\\node_modules\\webpack\\hot\\dev-server.js", "D:\\VS\\VueHMR\\src\\index.js" ], "filename": [ "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack-dev-server\\3.10.3_webpack@5.0.0-beta.14\\node_modules\\webpack-dev-server\\client\\index.js?http://localhost:38765", "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack\\5.0.0-beta.14_webpack@5.0.0-beta.14\\node_modules\\webpack\\hot\\dev-server.js", "bundle.js" ] } }, "output": { "path": "D:\\VS\\VueHMR\\dist", "filename": "bundle.[name].js" }, "mode": "development", "plugins": [ { "options": {}, "fullBuildTimeout": 200 } ] }

For Bugs; How can we reproduce the behavior?

Clone https://github.com/ryanelian/webpack-dev-server-bug2453

Using command line, run: node wds-cli.js

For Features; What is the motivation and/or use-case for the feature?

None

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions