[Bug]: Webpack: TypeError: PurgeCSSPlugin is not a constructor

[gndk]

Describe the bug

After upgrading to 5.0.0, my webpack build failed with TypeError: PurgeCSSPlugin is not a constructor.

To Reproduce

Use webpack plugin with current instructions:

const PurgeCSSPlugin = require('purgecss-webpack-plugin')

then somewhere new PurgeCSSPlugin(...)

Expected Behavior

Webpack build succeeds.

Environment

v. 5.0.0

Add any other context about the problem here

I fixed my problem by simply changing

const PurgeCSSPlugin = require('purgecss-webpack-plugin');

to

const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');

I don't know if this change was intended with the 5.0.0 update. If yes, it would be a quick fix in the webpack plugin instructions :)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[CutImger]

+1

[razvanFrandes]

Adding PurgeCSSPlugin between curly brackets doesn't fix the problem, I still get that error. Webpack version: "webpack": "^5.74.0", "webpack-cli": "^4.10.0",

[JayDarji]

+1

[jgroc-de]

adding curly brackets solved the problem for us as show in the new 'usage'. Maybe this should have been report as a breaking change?

[zhang-li-80]

In the changelog, it says it supports default and named export, and there is a commit for that.

But in the next commit, it removes the default export.

I think the changelog should up updated instead to say only named export can be used.

[thomas-void0]

same

[denOldTimer]

Adding PurgeCSSPlugin between curly brackets doesn't fix the problem, I still get that error. Webpack version: "webpack": "^5.74.0", "webpack-cli": "^4.10.0",

[paper-florent]

Same...

[paper-florent]

it looks like it should be

const { PurgeCSSPlugin } 			= require("purgecss-webpack-plugin");

[denOldTimer]

I temporarily solved my issue by downgrading back to version 4.1.3 but I missing out on the new stuff. Also got a new issue, it's definitely a webpack issue, not sure if it's a webpack-purgecss-plugin issue. Namely: javascript - toggle not functioning after webpack compilation. In the browser inspector I can see the toggle working but the class being added doesn't override the current class. At first, I thought purgecss was removing the class properties because it hasn't been used initially. And that still may be true, hence my mention of if. It is as if the specificity of the toggle class {.active} is lower than the current class and thus is voided.

That's why I think this is a purgecss issue

[Dave3of5]

FYI for anyone having problems with this please note that the casing has to match exactly. You need to change the import to:

const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');

and the call after this to

new PurgeCSSPlugin({ ...

Note the capitalisation of CSS.

[paper-florent]

FYI for anyone having problems with this please note that the casing has to match exactly. You need to change the import to:

const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');

and the call after this to

new PurgeCSSPlugin({ ...

Note the capitalisation of CSS.

Check my comment just before @Dave3of5 :)

[Ffloriel]

Documentation updated and is showing the correct syntax now

const { PurgecssPlugin } = require("purgecss-webpack-plugin");

[PiyushAgrawal1243]

const purgeCssWebpackPlugin = require("purgecss-webpack-plugin").PurgeCSSPlugin;

This working for me.