Nuxt: The extractor has failed to extract the selectors

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! luontokuvat-aj@1.0.0 build: `nuxt build -c config/nuxt.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the luontokuvat-aj@1.0.0 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/

[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?