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.

Sign up for GitHub

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

Jump to bottom

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

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

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

javiereguiluz opened this issue Jun 2, 2018 · 5 comments

Comments

@javiereguiluz
Copy link
Member

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
Copy link
Collaborator

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
Copy link
Member Author

@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
Copy link
Collaborator

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
Copy link
Member

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 javiereguiluz mentioned this issue Jun 2, 2018
Closed
@javiereguiluz
Copy link
Member Author

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

@javiereguiluz javiereguiluz mentioned this issue Jun 18, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@javiereguiluz @weaverryan @Lyrkan