I can't make PurgeCSS work with Webpack Encore #330
Description
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!
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
Lyrkan commentedon Jun 2, 2018
Hi @javiereguiluz,
I think the version of the
purgecss-webpack-pluginyou are using only works with Webpack 4 (Encore uses v3 for now), could you trypurgecss-webpack-plugin@0.23.0instead?javiereguiluz commentedon Jun 2, 2018
@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 commentedon Jun 2, 2018
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 commentedon Jun 2, 2018
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 commentedon Jun 2, 2018
Thanks for your comments. I've opened FullHuman/purgecss-webpack-plugin#30 to ask them about "peer dependencies".