webpack 5 deprecation warning

[adaamz]

Webpack/Grunt Configuration (webpack.config.js, webpack part of Gruntfile.js)

Gruntfile.js:

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-webpack');

    const webpackPanelConfig = require('webpack.config.js');
    grunt.initConfig({
        webpack: {
            panel: webpackPanelConfig("production"),
            panel_watch: webpackPanelConfig("development"),
        }
    }); // removed unrelated grunt tasks
}

webpack.config.js

const config = {
    entry: "App.ts",
}; // simplified

module.exports = function(env) {
    return config; //simplified
};

Expected Behavior

No deprecation warnings :)

Current Behavior

> grunt ts:watch
Running "webpack:panel_watch" (webpack) task
10% building(node:19988) [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.

Context

Trying to update webpack from 4 to 5.

Your Environment

btw this command npm ls grunt webpack grunt-webpack gives me error

+-- grunt@1.3.0
+-- grunt-webpack@4.0.2
`-- UNMET PEER DEPENDENCY webpack@5.2.0

npm ERR! peer dep missing: webpack@^4.0.0, required by grunt-webpack@4.0.2

software	version
webpack	5.2.0
grunt-webpack	4.0.2
grunt	1.3.0
node	14.2.0
npm	6.14.5
Operating System	Windows 10

[bonesoul]

same issue here with peer dep

[lhtdesignde]

same here

[alexander-akait]

@danez friendly ping

[lhtdesignde]

looks like they fixed it here: webpack/webpack-cli#1918

[lhtdesignde]

they did fix it for the cli but seems like grunt-webpack might need to still get that. not sure what to replace watch:true with. If I remove it as suggested the watch is not working.

[alexander-akait]

You can remove watch: true from the configuration

[alexander-akait]

Error is some misleading, it should be No need to set "{ watch: true }" when you run watch

[lhtdesignde]

ya but if I do that it doesn't work with the watching.

[alexander-akait]

How you run command?

[lhtdesignde]

I have

watch: true,
keepalive: true 

and i get the deprecation warning. But it does watch when I run the task and updates when I change a file.
When i remove watch: true, the warning is gone but it does not watch anymore.

[lhtdesignde]

I run grunt webpack:devwatch

[lhtdesignde]

The whole task:

      devwatch: {
        mode: 'development',
        entry: {
          bundle: './<%= paths.src %>/javascripts/react/containers/Root'
        },
        output: {
          path: path.join(__dirname, '<%= paths.dist %>/javascripts'),
          filename: '[name].js',
          chunkFilename: '[name]-chunk.js',
          publicPath: '/intl/javascripts/'
        },
        plugins: [
          new WebpackManifestPlugin({
            fileName: '../../../.js-names.json',
            filter: (file) => !file.path.match(/\.map$|\d-chunk/)
          })
        ],
        devtool: 'cheap-module-source-map',
        optimization: {
          nodeEnv: 'development',
          mergeDuplicateChunks: true,
          removeEmptyChunks: true,
          concatenateModules: true,
          runtimeChunk: 'single',
          chunkIds: 'total-size',
          moduleIds: 'size',
          splitChunks: {
            chunks: 'all',
            cacheGroups: {
              defaultVendors: {
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                chunks: 'initial',
                reuseExistingChunk: true
              }
            }
          }
        },
        resolve: webpackResolution,
        module: {
          rules: webpackRules
        },
        performance: {
          hints: false
        },
        watch: true, 
        keepalive: true
      }

[alexander-akait]

Weird, based on source core https://github.com/webpack-contrib/grunt-webpack/blob/master/tasks/webpack.js#L106, you can safely remove watch from webpack.config.js and use watch as option

[alexander-akait]

watchOptions is only for how watch should work, grunt has options on tasks level

[lhtdesignde]

yes. how do I use an option with grunt-webpack? If I do grunt webpack:devwatch --watch that also doesn't work. so I would need to attach it somehow else?

[alexander-akait]

oh, I see, yes, we need to fix it, should be easy, just always set callback for any webpack run

[epx-nathan]

@alexander-akait Apologies if this is a silly question, but I assume from your comment above that this is something that needs to be handled in this package? (i.e. always setting a callback.) Or is it something users can take care of on our ends via some grunt setting?

[alexander-akait]

@epx-nathan Do you still have warning? Can you provide simple example?

[epx-nathan]

@alexander-akait Looks like @danez has created a PR with a fix! I can't provide a full simple code example but the packages I'm using are:

• grunt v1.3.0
• grunt-webpack v4.0.2
• webpack v5.33.2
• webpack-cli v4.6.0

My grunt file just imports my webpack config and then refers to it in this way:

And my webpack file has watch defined as true:

[github-actions]

🎉 This issue has been resolved in version 4.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[epx-nathan]

Just responding to let you all know that this did fix my issue. Thanks so much for the quick turnaround, really appreciated!