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

ryanelian · 2020-03-10T08:06:04Z

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

The text was updated successfully, but these errors were encountered:

ryanelian · 2020-03-10T08:06:43Z

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 · 2020-03-10T09:02:28Z

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 · 2020-03-10T09:03:03Z

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

webpack/webpack-dev-server#2453

ryanelian · 2020-03-10T11:14:17Z

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 · 2020-03-10T11:22:22Z

Yes, but, feel free to send a PR

ryanelian · 2020-03-10T11:45:26Z

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\\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": "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\5.0.0-beta.14_webpack@5.0.0-beta.14\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\5.0.0-beta.14_webpack@5.0.0-beta.14\node_modules\webpack\lib\library\EnableLibraryPlugin.js:39:10)
    at Function.entryDescriptionToOptions (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\EntryOptionPlugin.js:56:24)
    at 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\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\3.10.3_webpack@5.0.0-beta.14\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\3.10.3_webpack@5.0.0-beta.14\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\3.10.3_webpack@5.0.0-beta.14\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 · 2020-03-29T10:18:31Z

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 · 2020-03-31T10:48:30Z

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

ryanelian changed the title ~~webpack-dev-server 5 is not compatible with the latest webpack 5 beta 14~~ webpack-dev-server is not compatible with the latest webpack 5 beta 14 Mar 10, 2020

alexander-akait closed this as completed Mar 10, 2020

ryanelian added a commit to ryanelian/webpack-dev-server-bug2453 that referenced this issue Mar 10, 2020

WDS is incompatible with webpack 5 beta 4

8b3e8f9

webpack/webpack-dev-server#2453

alexander-akait reopened this Mar 10, 2020

alexander-akait added priority: 3 (important) scope: server semver: patch severity: 3 (broken) type: bug labels Mar 10, 2020

ryanelian mentioned this issue Mar 12, 2020

webpack 5 beta feedback webpack/webpack#9802

Closed

alexander-akait assigned smelukov Mar 17, 2020

smelukov added a commit to smelukov/webpack-dev-server that referenced this issue Mar 18, 2020

feat: support entry descriptor (closes webpack#2453)

ab9b447

smelukov mentioned this issue Mar 18, 2020

feat: support entry descriptor (closes #2453) #2465

Merged

2 tasks

alexander-akait closed this as completed in #2465 Mar 18, 2020

alexander-akait pushed a commit that referenced this issue Mar 18, 2020

fix: support entry descriptor (closes #2453) (#2465)

8bbef6a

bbonkr mentioned this issue Oct 11, 2020

webpack-dev-server@3 은 webpack@5 + webpack-cli@4 와 사용할 수 없음 bbonkr/convert-file-to-base64-encoded-string#1

Closed

This was referenced Mar 12, 2021

Bump webpack-dev-server from 3.1.10 to 3.11.2 danbruder/ionic-4-elm#7

Merged

Bump webpack-dev-server from 3.10.3 to 3.11.2 boiyelove/ecommerce#16

Closed

Bump webpack-dev-server from 3.1.4 to 3.11.2 in /frontend Quartech/QSLContacts#81

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ryanelian commented Mar 10, 2020 •

edited

ryanelian commented Mar 10, 2020 •

edited

alexander-akait commented Mar 10, 2020

alexander-akait commented Mar 10, 2020

ryanelian commented Mar 10, 2020

alexander-akait commented Mar 10, 2020

ryanelian commented Mar 10, 2020

ryanelian commented Mar 29, 2020

alexander-akait commented Mar 31, 2020

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

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

Comments

ryanelian commented Mar 10, 2020 • edited

Code

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

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

ryanelian commented Mar 10, 2020 • edited

alexander-akait commented Mar 10, 2020

alexander-akait commented Mar 10, 2020

ryanelian commented Mar 10, 2020

alexander-akait commented Mar 10, 2020

ryanelian commented Mar 10, 2020

ryanelian commented Mar 29, 2020

alexander-akait commented Mar 31, 2020

ryanelian commented Mar 10, 2020 •

edited

ryanelian commented Mar 10, 2020 •

edited