Compilation Error - npm run dev

[martincarlin87]

Hi there,

I can't seem to get this to work unfortunately, but it could very well be a wider issue and not down to this particular package.

OS: OS X 10.12.6 Sierra
Laravel: 5.4
Node: 7.8.0
npm: 4.2.0

My webpack.mix.js file hasn't been touched for a while with the exception of adding new js files to compile:

const { mix } = require('laravel-mix');

if (process.env.NODE_ENV == 'production') {
  mix.disableNotifications();
}

mix.sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false
  });

// JS files
mix.js('resources/assets/js/users/index.js', 'public/js/users');

I've changed it to the following, but even commenting out the package specific lines and only requiring the node module seems to cause the npm run dev command to fail:

let mix = require('laravel-mix');
let purgeCss = require('laravel-mix-purgecss');

if (process.env.NODE_ENV == 'production') {
  mix.disableNotifications();
}

mix.sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false
  });
  /*
  .purgeCss({
    enabled: true,
    extensions: ['html', 'js', 'php']
  });
  */

I've also tried completely removing the existing node_modules directory and clearing the cache:

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

The only thing I changed in my package.json was to change the laravel-mix version to ^2.0.0, it was previously 0.*.

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^2.0.0",
    "laravel-mix-purgecss": "^1.0.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "js-beautify": "1.6.14",
    "laravel-echo": "^1.3.0",
    "pusher-js": "^4.1.0"
  }
}

The error message isn't very helpful, this is the entire log file generated:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@4.2.0
3 info using node@v7.8.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 silly lifecycle @~predev: no script for predev, continuing
7 info lifecycle @~dev: @
8 verbose lifecycle @~dev: unsafe-perm in lifecycle true
9 verbose lifecycle @~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/martin/silver-bullet/node_modules/.bin:/Users/martin/.rbenv/shims:/Users/martin/.rbenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/martin/.composer/vendor/bin:/usr/local/mysql/bin/
10 verbose lifecycle @~dev: CWD: /Users/martin/silver-bullet
11 silly lifecycle @~dev: Args: [ '-c', 'npm run development' ]
12 silly lifecycle @~dev: Returned: code: 1  signal: null
13 info lifecycle @~dev: Failed to exec dev script
14 verbose stack Error: @ dev: `npm run development`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd /Users/martin/silver-bullet
17 error Darwin 16.7.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
19 error node v7.8.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error @ dev: `npm run development`
23 error Exit status 1
24 error Failed at the @ dev script 'npm run development'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the  package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     npm run development
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

Currently attempting upgrading my versions of node and npm to see if that helps.

Update

After updating, the commented out version works which just requires the package and doesn't try to use it, after trying to use the plugin, it generates this error:

> @ dev /Users/martin/silver-bullet
> npm run development


> @ development /Users/martin/silver-bullet
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 92% recording/Users/martin/silver-bullet/node_modules/purgecss/lib/purgecss.js:1   c (function (exports, require, module, __filename, __dirname) { "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var fs=_interopDefault(require("fs")),glob=_interopDefault(require("glob")),postcss=_interopDefault(require("postcss")),selectorParser=_interopDefault(require("postcss-selector-parser"));function normalizeArray(e,t){for(var r=0,n=e.length-1;n>=0;n--){var o=e[n];"."===o?e.splice(n,1):".."===o?(e.splice(n,1),r++):r&&(e.splice(n,1),r--)}if(t)for(;r--;r)e.unshift("..");return e}var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,splitPath=function(e){return splitPathRe.exec(e).slice(1)};function resolve(){for(var e="",t=!1,r=arguments.length-1;r>=-1&&!t;r--){var n=r>=0?arguments[r]:"/";if("string"!=typeof n)throw new TypeError("Arguments to path.resolve must be strings");n&&(e=n+"/"+e,t="/"===n.charAt(0))}return e=normalizeArray(filter(e.split("/"),function(e){

TypeError: Cannot read property 'extractor' of undefined
    at e.value (/Users/martin/silver-bullet/node_modules/purgecss/lib/purgecss.js:1:8460)
    at e.value (/Users/martin/silver-bullet/node_modules/purgecss/lib/purgecss.js:1:7979)
    at e.value (/Users/martin/silver-bullet/node_modules/purgecss/lib/purgecss.js:1:6214)
    at /Users/martin/silver-bullet/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:244:97
    at Array.forEach (<anonymous>)
    at /Users/martin/silver-bullet/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:195:39
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/Users/martin/silver-bullet/node_modules/purgecss-webpack-plugin/lib/purgecss-webpack-plugin.js:181:40)
    at next (/Users/martin/silver-bullet/node_modules/tapable/lib/Tapable.js:204:14)
    at Compilation.<anonymous> (/Users/martin/silver-bullet/node_modules/extract-text-webpack-plugin/dist/index.js:275:11)
    at Compilation.applyPluginsAsyncSeries (/Users/martin/silver-bullet/node_modules/tapable/lib/Tapable.js:206:13)
    at sealPart2 (/Users/martin/silver-bullet/node_modules/webpack/lib/Compilation.js:662:9)
    at next (/Users/martin/silver-bullet/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/Users/martin/silver-bullet/node_modules/webpack/lib/ProgressPlugin.js:111:6)
    at next (/Users/martin/silver-bullet/node_modules/tapable/lib/Tapable.js:204:14)
    at /Users/martin/silver-bullet/node_modules/extract-text-webpack-plugin/dist/index.js:244:13
    at /Users/martin/silver-bullet/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/martin/silver-bullet/node_modules/async/dist/async.js:1050:13)
    at /Users/martin/silver-bullet/node_modules/async/dist/async.js:958:16
    at /Users/martin/silver-bullet/node_modules/extract-text-webpack-plugin/dist/index.js:227:15
    at /Users/martin/silver-bullet/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/martin/silver-bullet/node_modules/async/dist/async.js:1050:13)
    at /Users/martin/silver-bullet/node_modules/async/dist/async.js:958:16
    at /Users/martin/silver-bullet/node_modules/extract-text-webpack-plugin/dist/index.js:216:21
    at rebuilding.forEach.cb (/Users/martin/silver-bullet/node_modules/webpack/lib/Compilation.js:530:29)
    at Array.forEach (<anonymous>)
    at callback (/Users/martin/silver-bullet/node_modules/webpack/lib/Compilation.js:530:15)
    at processModuleDependencies (/Users/martin/silver-bullet/node_modules/webpack/lib/Compilation.js:549:5)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

If I remove the extensions line in the config then it seems to work:

mix.sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false
  })
  .purgeCss({
    enabled: true,
    // extensions: ['html', 'js', 'php']
  });

Thanks,
Martin

[sebastiandedeyne]

Since you've updated Mix, could you update the scripts tag in package.json too? It seems that others have had similar issues with Mix, and it was mostly related to that (e.g. laravel-mix/laravel-mix#373 (comment))

Here's what the latest version looks like: https://github.com/laravel/laravel/blob/f4cba4f2b254456645036139129142df274a1ec1/package.json#L3

Here's another similar issue that might give you a clue... laravel-mix/laravel-mix#127

[martincarlin87]

Thanks Sebastian, all good, just seems to cause an error when specifying the extensions.

.purgeCss({
      enabled: true,
      // extensions: ['html', 'js', 'php']
});

is fine but once uncommented it produces the same error

TypeError: Cannot read property 'extractor' of undefined

which seems to come from purgecss itself?`

I could be misusing the package, is a custom extractor required if extensions is specified in the config? If so, I will just leave it out, I was just trying to reduce the number of extensions as I don't have any .html or .vue files.

Cheers,
Martin

[sebastiandedeyne]

Looks like that was a bug on our end! I just released 1.0.2, could you give that a spin?

[martincarlin87]

Yip, thank you, it works now :)