Webpack-dev-server: DEP_WEBPACK_WATCH_WITHOUT_CALLBACK after upgrading to webpack 5.x

[elgs]

• Operating System: macOS Catalina Version 10.15.7
• Node Version: v14.13.1
• NPM Version: 6.14.8
• webpack Version: 5.1.0
• webpack-dev-server Version: 3.11.0
• Browser: Not relevant

• [ ] This is a bug
• [x] This is a modification request

Code

// webpack.config.js

   // the config is not relevant in this case
   // const webpackConfig = {};
   const webpackDevConfig = {
      ...webpackConfig,
      mode: 'development',
      watch: true,
      devtool: 'eval-cheap-module-source-map',
      performance: {
         hints: false,
      },
   };

   const compiler = webpack(webpackDevConfig);

   const devServerOptions = {
      ...webpackDevConfig.devServer,
      contentBase: process.cwd() + `/serve/`,
      watchContentBase: true,
      publicPath: '/',
      hot: true,
      open: true,
      stats: 'errors-warnings',
   };
   const server = new WebpackDevServer(compiler, devServerOptions);
   server.listen(2020, '127.0.0.1');

Expected Behavior

Quiet as before upgrade to Webpack 5.x.

Actual Behavior

(node:96740) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)

I got the warning above when running the code after upgrading to webpack 5.x. The code I use is basically copied from the official webpack website: https://webpack.js.org/api/node/

For Bugs; How can we reproduce the behavior?

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

[alexander-akait]

Read the error message and fix deprecation

[elgs]

What callback should I put in?

[elgs]

Can you please reopen this issue until this is resolved?

[alexander-akait]

@elgs Do you read the deprecation message?

[elgs]

Yes, I did read it. But I didn't find the deprecation message helpful. Do you have any advice?

[elgs]

The deprecation message says I need to provide a callback, but what callback should I provide?

[alexander-akait]

webpack(options, callback)

[elgs]

Yes, what callback code should I provide?

[elgs]

If I provide a dummy callback like this:

const compiler = webpack(webpackDevConfig, () => { });

I got the following error:

✖ ｢wdm｣: ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.watch (/Users/qianchen/code/web/leanweb/node_modules/webpack/lib/Compiler.js:343:19)
    at wdm (/Users/qianchen/code/web/leanweb/node_modules/webpack-dev-middleware/index.js:41:33)
    at Server.setupDevMiddleware (/Users/qianchen/code/web/leanweb/node_modules/webpack-dev-server/lib/Server.js:207:23)
    at new Server (/Users/qianchen/code/web/leanweb/node_modules/webpack-dev-server/lib/Server.js:118:10)

[elgs]

@evilebottnawi can you please at least leave this issue open until it is resolved or some helpful advice is attracted? I don't understand why you close this ticket immediately without some proper judgement?

[alexander-akait]

Wait webpack-dev-middleware release

I don't understand why you close this ticket immediately without some proper judgement?

Because it is not related to webpack-dev-server and we can't fix it here

[elgs]

OK, this is the first useful advice. Thanks. Looks like I should post this issue to webpack-dev-middleware which is a dependency of your project.

[alexander-akait]

Yes, but It is fixed in webpack-dev-middleware, we need just release, hope I found time on this today/tomorrow

[elgs]

Cool! Then I'm not going to open a new issue there. I will wait for this package and its dependencies to be updated. Thank you so much for the information and the effort to fix it.

[elgs]

@evilebottnawi have you got a chance to get it fixed? I am still seeing the same warning.

[alexander-akait]

@elgs I am working on it

[elgs]

@evilebottnawi any chance to get any update? By no means pushing, please take your time. If this is not a trivial issue to fix, would you mind to reopen this issue? Thanks.

[elgs]

@evilebottnawi, any update will be greatly appreciated.

[alexander-akait]

Just remove watch: true from your configuration

[elgs]

It works! And it still is watching. That's awesome!

Just want to confirm removing watch: true doesn't mean not watching, is it right?

[alexander-akait]

Yes, you don't need watch: true if you run watching (webpack --watch/webpack serve), because it is unnecessary, you already watch it

[elgs]

What I do is something like this:

   const webpackDevConfig = {
      ...webpackConfig,
      mode: 'development',
      // watch: true,
      devtool: 'eval-cheap-module-source-map',
      performance: {
         hints: false,
      },
   };

   const compiler = webpack(webpackDevConfig);

   const devServerOptions = {
      ...webpackDevConfig.devServer,
      contentBase: process.cwd() + '/serve',
      watchContentBase: true,
      publicPath: '/',
      hot: true,
      open: true,
      stats: 'errors-warnings',
   };
   const server = new WebpackDevServer(compiler, devServerOptions);

   server.listen(2020, '127.0.0.1');