I can't make PurgeCSS work with Webpack Encore

[javiereguiluz]

I know that you don't provide user support in this repo ... but I've tried making this work for a lot of time, I've asked on Symfony's Slack multiple times and nobody replied and I Googled about this and couldn't find any solution. Could you please help me with this?

---

I want to use PurgeCSS in a Symfony4 + Flex app via the PurgeCSS Webpack Plugin (https://github.com/FullHuman/purgecss-webpack-plugin).

These are the changes I added to my webpack.config.js file:

var Encore = require('@symfony/webpack-encore');
+var PurgeCssPlugin = require('purgecss-webpack-plugin');
+var glob = require('glob-all');
+var path = require('path');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    // ...

+   .addPlugin(new PurgeCssPlugin({
+       paths: glob.sync([
+           path.join(__dirname, 'templates/**/*.html.twig')
+       ]),
+       extractors: [
+           {
+               extractor: class {
+                   static extract(content) {
+                       return content.match(/[A-z0-9-:\/]+/g) || []
+                   }
+               },
+               extensions: ['twig']
+           }
+       ]
+   }))
;

module.exports = Encore.getWebpackConfig();

This is the error message:

$ yarn encore production

<my-project>/node_modules/webpack/bin/webpack.js:315
        throw e;
        ^

TypeError: Cannot read property 'compilation' of undefined
    at PurgecssPlugin.apply (<my-project>/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:138:27)
    at Compiler.apply (<my-project>/node_modules/tapable/lib/Tapable.js:306:16)
    at webpack (<my-project>/node_modules/webpack/lib/webpack.js:32:19)
    at processOptions (<my-project>/node_modules/webpack/bin/webpack.js:305:14)
    at Object.<anonymous> (<my-project>/node_modules/webpack/bin/webpack.js:363:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (<my-project>/node_modules/@symfony/webpack-encore/bin/encore.js:52:12)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:201:16)
    at bootstrap_node.js:626:3
error Command failed with exit code 1.

My package.json contents:

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.20.0",
    "bootstrap": "^4.0.0",
    "glob-all": "^3.1.0",
    "node-sass": "^4.5.3",
    "path": "^0.12.7",
    "purgecss-webpack-plugin": "^1.1.0",
    "sass-loader": "^6.0.6"
  }
}

Thanks!

[Lyrkan]

Hi @javiereguiluz,

I think the version of the purgecss-webpack-plugin you are using only works with Webpack 4 (Encore uses v3 for now), could you try purgecss-webpack-plugin@0.23.0 instead?

[javiereguiluz]

@Lyrkan THAT WAS IT 😱 I'm used to PHP/Composer ... so I thought I was going to see some error if the versions were incompatible. In any case, thanks A LOT for helping me solve this problem. You really saved me!

[Lyrkan]

Actually you can also have that kind of error message with npm/yarn... but it looks like that plugin declares webpack as a dependency (which isn't a good thing in my opinion) instead of a peer dependency.

[weaverryan]

Yea, you’re right - I’m pretty sure it should be a peer dependency. In that case, you would have at least seen a warning about how you were missing Webpack v4 for this lib. But as a dependency, it just silently installed v4, but then allowed you to actually use v3 (hence the explosion).

[javiereguiluz]

Thanks for your comments. I've opened FullHuman/purgecss-webpack-plugin#30 to ask them about "peer dependencies".