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

[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

• [x] This is a bug
• [x] 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\[email protected]\node_modules\webpack\lib\validateSchema.js:36:2)
    at webpack (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\[email protected]\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\\[email protected]\\node_modules\\webpack-dev-server\\client\\index.js?http://localhost:38765",
                "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack\\[email protected]\\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\\[email protected]\\node_modules\\webpack-dev-server\\client\\index.js?http://localhost:38765",
                "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack\\[email protected]\\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

[ryanelian]

Sorry for the sloppy bug report, but I'm in a hurry and filing this so I won't forget later.

I promise I will file the issue properly tonight.

EDIT: filed the bug report properly 🎉

[alexander-akait]

The oroblem in your configuration, no a webpack-dev-server side, it is error validation, won't fix on our side, sorry.

Please read error message:

      Details:
       * configuration.entry['main'].filename should be a non-empty string.
       * configuration.entry['main'].filename should be an instance of function.

[alexander-akait]

Anyway feel free to leave feedback, I will reopen issue if you provide reproducible test repo and we find problem on our side, thanks

[ryanelian]

I thank you for the prompt and fast attention, but I wish you wouldn't close this issue too suddenly like that 😢

Anyway, I have updated the original comment and created a reproduction repo proving that the bug is indeed from webpack-dev-server: https://github.com/ryanelian/webpack-dev-server-bug2453

CC: @sokra

[alexander-akait]

Yes, but, feel free to send a PR

[ryanelian]

Additional notes:

Simply fixing so that WDS is only modifying the "import" field of the entry object appears to be inadequate.

More errors appear:

{
    "entry": {
        "main": {
            "import": [
                "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack-dev-server\\[email protected]\\node_modules\\webpack-dev-server\\client\\index.js?http://localhost:38765",
                "D:\\VS\\VueHMR\\node_modules\\.pnpm\\registry.npmjs.org\\webpack\\[email protected]\\node_modules\\webpack\\hot\\dev-server.js",
                "D:\\VS\\VueHMR\\src\\index.js"
            ],
            "filename": "bundle.js"
        }
    },
    "output": {
        "path": "D:\\VS\\VueHMR\\dist",
        "filename": "bundle.[name].js"
    },
    "mode": "development",
    "plugins": [
        {
            "options": {},
            "fullBuildTimeout": 200
        }
    ]
}
D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\[email protected]\node_modules\webpack\lib\library\EnableLibraryPlugin.js:39
                        throw new Error(
                        ^

Error: Library type "undefined" is not enabled. EnableLibraryPlugin need to be used to enable this type of library. This usually happens through the "output.enabledLibraryTypes" option. If you are using a function as entry which sets "library", you need to add all potential library types to "output.enabledLibraryTypes".
    at Function.checkEnabled (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\[email protected]\node_modules\webpack\lib\library\EnableLibraryPlugin.js:39:10)
    at Function.entryDescriptionToOptions (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\[email protected]\node_modules\webpack\lib\EntryOptionPlugin.js:56:24)
    at D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack\[email protected]\node_modules\webpack\lib\EntryOptionPlugin.js:26:40
    at Hook.eval [as call] (eval at create (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\tapable\2.0.0-beta.9\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:16)
    at D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack-dev-server\[email protected]\node_modules\webpack-dev-server\lib\utils\updateCompiler.js:51:34
    at Array.forEach (<anonymous>)
    at updateCompiler (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack-dev-server\[email protected]\node_modules\webpack-dev-server\lib\utils\updateCompiler.js:49:15)
    at new Server (D:\VS\VueHMR\node_modules\.pnpm\registry.npmjs.org\webpack-dev-server\[email protected]\node_modules\webpack-dev-server\lib\Server.js:72:5)
    at Object.<anonymous> (D:\VS\VueHMR\wds-cli.js:51:19)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)

[ryanelian]

I have confirmed that the issue is resolved with the latest master branch (npm install github:webpack/webpack-dev-server#3bf43a7343d573dbefeec2d184d71a1ea88f1cda)

Can this fix be published to npm please?

[alexander-akait]

Yes, in near future, we need land some more fixes