Webpack update to V5 from V4: this.plugin is not a function

Viewed 3200

Here is my package.json versions for Webpack:

"webpack": "5.25.0",
"webpack-cli": "4.5.0",
"webpack-merge": "5.7.3"

So latest version for all. And I come from 4.31 for webpack version.

In my webpack.production.js, in the plugins array, I have:

        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[hash].app.css',
        }),
        function symfonyAssetsVersion() {
            this.plugin('done', (stats) => {
                fs.writeFile(
                    path.join(__dirname, 'config/packages/', 'assets_version.yaml'),
                    `parameters:\n    assets_hash: ${stats.hash}\n`,
                    (err) => { if (err) throw err; }
                );
            });
        },
    ],

My CircleCi tool tells that:


[webpack-cli] TypeError: this.plugin is not a function
    at Compiler.symfonyAssetsVersion (/app/webpack.production.js:27:18)
    at createCompiler (/app/node_modules/webpack/lib/webpack.js:69:12)
    at create (/app/node_modules/webpack/lib/webpack.js:118:16)
    at webpack (/app/node_modules/webpack/lib/webpack.js:126:47)
    at WebpackCLI.f [as webpack] (/app/node_modules/webpack/lib/index.js:41:15)
    at WebpackCLI.createCompiler (/app/node_modules/webpack-cli/lib/webpack-cli.js:1678:29)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3) ```

Any idea on how to fix the this.plugin is not a function ? 

Thank you
1 Answers

You have to rewrite symfonyAssetsVersion() as a custom plugin that matches Webpack 5's api. You can read more info here: https://webpack.js.org/contribute/writing-a-plugin/.

Basically, create a new class with apply on the prototype. Then hook into compiler.hooks.done, and stats will be provided in the callback.

Related