Purgecss: Nuxt: The extractor has failed to extract the selectors

[alanaasmaa]

Hello,

I'm trying to get purgecss to work with my project.
I followed the guide from here https://github.com/FullHuman/purgecss/tree/master/examples/with-nuxt
I have also used google and tried custom extractors.

When i'm not using custom extractor i get this kind of error:

additional chunk assets processingError: The extractor has failed to extract the selec
tors.
    at e.value (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss\lib\purgecss.js:1:8991)
    at e.value (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss\lib\purgecss.js:1:8434)
    at e.value (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss\lib\purgecss.js:1:6323)
    at C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js
:244:97
    at Array.forEach (<anonymous>)
    at C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss-webpack-plugin\lib\purgecss-webpack-plugin.js
:195:39
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\purgecss-webpack-plugin\lib\p
urgecss-webpack-plugin.js:181:40)
    at next (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapable.js:204:14)
    at Compilation.<anonymous> (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\extract-text-webpack-plugin\d
ist\index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapab
le.js:206:13)
    at applyPluginsAsyncSeries (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\Compilation.js:65
9:9)
    at next (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapable.js:202:11)
    at Compilation.compilation.plugin (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\ProgressPl
ugin.js:111:6)
    at next (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapable.js:204:14)
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\extract-text-webpack-plugin\dist\index.js:244:13
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:421:16
    at iteratorCallback (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:998:13)
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:906:16
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\extract-text-webpack-plugin\dist\index.js:227:15
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:421:16
    at eachOfArrayLike (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:991:9)
    at eachOf (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:3145:5)
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\extract-text-webpack-plugin\dist\index.js:189:29
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:3083:16
    at eachOfArrayLike (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:1003:9)
    at eachOf (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:1051:5)
    at Object.eachLimit (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\async\dist\async.js:3145:5)
    at Compilation.<anonymous> (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\extract-text-webpack-plugin\d
ist\index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapab
le.js:206:13)
    at Compilation.seal (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\Compilation.js:602:8)
    at applyPluginsParallel.err (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\Compiler.js:504:
17)
    at C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\Compilation.js:505:11)
    at processModuleDependencies.err (C:\Users\AlanAasmaa\Code\luontokuva-aj\node_modules\webpack\lib\Compilation
.js:475:14)
    at process._tickCallback (internal/process/next_tick.js:112:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `nuxt build -c config/nuxt.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AlanAasmaa\AppData\Roaming\npm-cache\_logs\2018-03-19T17_29_23_665Z-debug.log

When i'm using custom extractor :
(i also console logged my paths and they are correct my config is in config/nuxt.js dir)

config.plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
            path.join(__dirname, './../resources/pages/**/*.vue'),
            path.join(__dirname, './../resources/layouts/**/*.vue'),
            path.join(__dirname, './../resources/components/**/*.vue')
          ]),
          whitelist: ['html', 'body', 'nuxt-progress'],
          extractors: [
            {
              extractor: class {
                static extract (content) {
                  return content.match(/[A-z0-9-:/]+/g) || []
                }
              },
              extensions: ['html', 'js', 'vue']
            }
          ]
        })

I get alot of these:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer
to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\extract-text-webpack-plugin\dist\loader.
js:57:11)

 @ ./resources/components/galleria/Item.vue 4:2-808
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":false,"plugins":["lodash"],"presets":["vue-a
pp"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/pages/index.vue
 @ ./resources/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

 error  in ./resources/components/galleria/ItemShowPhoto.vue

ERROR in ./node_modules/extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!./node_modules/vue-st
yle-loader?{"sourceMap":false}!./node_modules/css-loader?{"sourceMap":false,"minimize":true,"importLoaders":1,"al
ias":{"/assets":"C://Users//AlanAasmaa//COde//luontokuva-aj//resources//assets","/static":"C://Users//AlanAasmaa/
/COde//luontokuva-aj//resources//static"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-
c73e7650","scoped":true,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./no
de_modules/sass-resources-loader/lib/loader.js?{"resources":["C://Users//AlanAasmaa//COde//luontokuva-aj//resourc
es//assets//scss//_variables.scss"]}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./resources/pa
ges/admin/index.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer
to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (C:\Users\AlanAasmaa\COde\luontokuva-aj\node_modules\extract-text-webpack-plugin\dist\loader.
js:57:11)
 @ ./resources/pages/admin/index.vue 4:2-808
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

Im using latest purgecss "purgecss-webpack-plugin": "^0.20.1",

EDIT: Here is sentry link https://sentry.io/share/issue/d3c9576a1c3f4646a574090bf384d93f/

[jsnanigans]

Hi @alanaasmaa
Does this error only occur when you add purgecss? it looks to me like it could be a problem with extract-text-webpack-plugin or maybe even the html-webpack-plugin

[alanaasmaa]

@jsnanigans Thanks for you reply.

Yes it only occurs when i add purgecss.

Maybe it does not work with nuxt-sass-resources-loader..
I have to try without it after i get home.

[alanaasmaa]

I tried to disable nuxt-sass-resources-loader but it did not help.

[jsnanigans]

Normally the error The extractor has failed to extract the selec tors. appears when there is something wrong with the paths,

paths: glob.sync([
            path.join(__dirname, './../resources/pages/**/*.vue'),
            path.join(__dirname, './../resources/layouts/**/*.vue'),
            path.join(__dirname, './../resources/components/**/*.vue')
          ]),

Can you try to disable them one by one and see if it works?
You can also try to replace /**/*.vue with just /*.vue if you dont have sub-directories

[alanaasmaa]

@jsnanigans Its very weird.

Before i changed anything i tested if it works.
It worked fine without no errors, i haven't touched anything after yesterdays test.

I only get the errors when i removed my extractor, but i used the same extractor before i posted.

Then i also updated all my packages and tested again. Everything seemed still okay.

Then i also checked from github that maybe i have changed something by accident but nothing..

Then i deployed my app to heroku (it failed there also before) and everything is okay.

Even my CSS file size gets smaller and page works as it should

203KB to 74KB (13KB gzipped)

Node versions:
9.8.0 on my PC
8.10.0 on Herkou
8.3.0 on laptop (should update)

Works on all three.

I'm very confused now. I suspect cache.

This issue is resolved so i will close it.

[tarponjargon]

In case anyone comes across this...I ran into this issue when there was a file in the purgecss search paths that existed but was empty.

[curtisbelt]

@alanaasmaa Can you re-open this? What @tarponjargon said is true, and I actually keep running into this because I keep forgetting about it. During development I sometimes create a few blank files as a "I want to create these today" kind of thing. Not high priority obviously but worth having an open ticket?

[jsnanigans]

I will suggest removing this error since its causing so many problems.

[chiefcll]

I recommend opening a new issue for "The extractor has failed to extract the selectors" when an empty file is present in the glob path as this has nothing to do with Nuxt

[Ffloriel]

If my memory is right, we fixed this issue (extractor failed with an empty file) in a previous release.
For the use with Nuxt, you can check this package: nuxt-purgecss.