Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I can't make PurgeCSS work with Webpack Encore #330

Closed
javiereguiluz opened this issue Jun 2, 2018 · 5 comments

Comments

@javiereguiluz
Copy link
Member

@javiereguiluz javiereguiluz commented Jun 2, 2018

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

This comment has been minimized.

Copy link
Collaborator

@Lyrkan Lyrkan commented Jun 2, 2018

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

This comment has been minimized.

Copy link
Member Author

@javiereguiluz javiereguiluz commented 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

This comment has been minimized.

Copy link
Collaborator

@Lyrkan Lyrkan commented 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

This comment has been minimized.

Copy link
Member

@weaverryan weaverryan commented 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

This comment has been minimized.

Copy link
Member Author

@javiereguiluz javiereguiluz commented Jun 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.