Been working on a Laravel PHP app that is using plenty of vue.js and vanilla JavaScript. We decided to add Slick Slider for a part of the app. It is now causing issues. Issues we are working on now. Decided to blog about it to perhaps make things clearer for us and solve it quicker.

NPM Production Errors

Compiling assets using:

npm run production

inside my Laravel app keeps on hanging on slick.scss it seems:

ERROR Failed to compile with 1 errors 10:32:06 AM
 
 error in ./~/slick-carousel/slick/slick.scss
 
 Module build failed: TypeError: Cannot read property '0' of null
 at findNameRoot (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors/extractor.js:66:59)
 at extract (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors/extractor.js:36:9)
 at restructure (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors/restructure.js:297:22)
 at optimize (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors/advanced.js:71:5)
 at minify (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:228:5)
 at whenSourceMapReady (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:135:7)
 at Object.whenDone (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:155:14)
 at processNext (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/imports/inliner.js:105:13)
 at importFrom (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/imports/inliner.js:79:10)
 at ImportInliner.process (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/imports/inliner.js:38:10)
 at /usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:120:41
 at runner (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:117:36)
 at CleanCSS.minify (/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/clean.js:119:12)
 at Object.module.exports (/usr/share/nginx/app/node_modules/css-loader/lib/loader.js:96:46)

I have no idea how this is happening or what is the cause.

Slick.scss Analysis

The slick.scss file looks OK to me:

/* Slider */
 
 .slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
 }
 .slick-list {
 position: relative;
 overflow: hidden;
 display: block;
 margin: 0;
 padding: 0;
 
 &:focus {
 outline: none;
 }
 
 &.dragging {
 cursor: pointer;
 cursor: hand;
 }
 }
 .slick-slider .slick-track,
 .slick-slider .slick-list {
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }
 
 .slick-track {
 position: relative;
 left: 0;
 top: 0;
 display: block;
 
 &:before,
 &:after {
 content: "";
 display: table;
 }
 
 &:after {
 clear: both;
 }
 
 .slick-loading & {
 visibility: hidden;
 }
 }
 .slick-slide {
 float: left;
 height: 100%;
 min-height: 1px;
 [dir="rtl"] & {
 float: right;
 }
 img {
 display: block;
 }
 &.slick-loading img {
 display: none;
 }
 
 display: none;
 
 &.dragging img {
 pointer-events: none;
 }
 
 .slick-initialized & {
 display: block;
 }
 
 .slick-loading & {
 visibility: hidden;
 }
 
 .slick-vertical & {
 display: block;
 height: auto;
 border: 1px solid transparent;
 }
 }
 .slick-arrow.slick-hidden {
 display: none;
 }

When I compiled it and checked at W3C CSS Validator I did get some errors though:

11 .slick-slider Property user-select doesn't exist : none
13 .slick-slider Property touch-action doesn't exist : pan-y
31 .slick-list.dragging Value Error : cursor hand is not a cursor value : hand
83 .slick-slide.dragging img Property pointer-events doesn't exist : none

Here is the CSS:

/* Slider */
.slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
}

.slick-list {
 position: relative;
 overflow: hidden;
 display: block;
 margin: 0;
 padding: 0;
}

.slick-list:focus {
 outline: none;
}

.slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

.slick-track {
 position: relative;
 left: 0;
 top: 0;
 display: block;
}
.slick-track:before, .slick-track:after {
 content: "";
 display: table;
}
.slick-track:after {
 clear: both;
}
.slick-loading .slick-track {
 visibility: hidden;
}

.slick-slide {
 float: left;
 height: 100%;
 min-height: 1px;
 display: none;
}

[dir="rtl"] .slick-slide {
 float: right;
}

.slick-slide img {
 display: block;
}

.slick-slide.slick-loading img {
 display: none;
}

.slick-slide.dragging img {
 pointer-events: none;
}

.slick-initialized .slick-slide {
 display: block;
}

.slick-loading .slick-slide {
 visibility: hidden;
}

.slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
 display: none;
}

Not sure if these errors are the culprit though. Pointer-event is and can be used by most browsers for example.

JavaScript Error

The actual error is a JavaScript error saying 0 does not exist. So somehow it cannot compile or run as an element is missing. At line 66 of extractor.js there is

return name.replace(/^\-\w+\-/, '').match(/([a-zA-Z]+)/)[0].toLowerCase();

I checked the css for error still, but no obvious issues with uppercase selectors and such as discussed at https://github.com/jakubpawlowicz/clean-css/issues/480 .

Rebuilding Node Packages

I decided to also do a:

rm -rf node_modules

followed by a:

npm install && npm run production

But no change. And my node and npm versions are quite recent:

npm --version
4.5.0
node --version
v7.10.0

Update Node Packages

So I decide to do update all node packages doing an:

npm update

as well and webpack, vue.js and many node module packages were updated:

vue-loader@10.3.0 /usr/share/nginx/smart/node_modules/vue-loader

├── babel-core@6.24.1
├── babel-loader@6.4.1
├── babel-preset-es2015@6.24.1
├── chai@3.5.0
├── coffee-loader@0.7.3
├── coffee-script@1.12.6
├── consolidate@0.14.5
├── css-loader@0.26.4
├── eslint@3.19.0
├── eslint-config-vue@2.0.2
├── eslint-plugin-vue@2.0.1
├── expose-loader@0.7.3
├── extract-text-webpack-plugin@2.1.0
├── file-loader@0.10.1
├── hash-sum@1.0.2
├── inject-loader@2.0.1
├── js-beautify@1.6.14
├── jsdom@9.12.0
├── loader-utils@0.2.17
├── lru-cache@4.0.2
├── marked@0.3.6
├── memory-fs@0.4.1
├── mkdirp@0.5.1
├── mocha@3.4.1
├── node-libs-browser@2.0.0
├── normalize-newline@3.0.0
├── null-loader@0.1.1
├── postcss@5.2.17
├── postcss-selector-parser@2.2.3
├── pug@2.0.0-rc.1
├── raw-loader@0.5.1
├── skeleton-loader@0.0.5
├── source-map@0.5.6
├── stylus@0.54.5
├── stylus-loader@2.5.1
├── sugarss@0.2.0
├── url-loader@0.5.8
├── vue@2.3.3
├── vue-hot-reload-api@2.1.0
├── vue-server-renderer@2.3.3
├── vue-style-loader@2.0.5
├── vue-template-compiler@2.3.3
├── vue-template-es2015-compiler@1.5.2
└── webpack@2.6.0

But still no change and the same error

Outdated NPM Packages

Then I ran npm outdated to check what packages were not at the latest version:

Package           Current  Wanted  Latest  Location
axios               0.15.3    0.15.3   0.16.1
laravel-mix         0.8.9   0.8.9     0.12.0
normalize.css       6.0.0   6.0.0    7.0.0
vue-quill-editor    1.1.1   1.1.1    2.2.1

and still saw I had outdated packages. This of course due to settings in package.json. Where Laravel Mix was limited in updates with the caret:

"laravel-mix": "^0.8.1"

Vue Loader Check

These outdated packages did not seem to be related to the issue and vue-loader (webpack loader for vue.js components) still was not updated either. This being a dependency for other node packages I assumed. And this module interested me as I read at https://github.com/vuejs/vue-loader/issues/790 that a certain version did not recognize:

<style lang="scss">

which we use in Vue components to load the Slick scss. But then I realized the way our scss files were added was with:

<style type="scss">

So that is not exactly the same…

Clean CSS Parsing Issues

And that brings me back to the clean-css module and a possible CSS issue. At https://stackoverflow.com/questions/34607656/clean-css-typeerror-cannot-read-property-0-of-null someone had a very similar issue. It mentions the same error

TypeError: Cannot read property '0' of null

and the same files are involved. He also checked for uppercase selectors, commented lines and such. We do have one comment, but I think:

/* Slider */

is legit. I had only read “//” for comments did not work.

CSS Loader including node_modules

What amazed me was to see node_modules as a directory inside a node module like:

/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors

But that was not incorrect. Then I realized that the directory:

/usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selectors/

was nowhere to be found. So building did not go as it was supposed to now was it.

Clean Installation Node Modules

So I did a npm clean cache, rm -rf node_modules and then a npm install. And then I ran an npm run production again. And this time

usr/share/nginx/app/node_modules/css-loader/node_modules/clean-css/lib/selector

did get built 🙂 . But I still had the same error:

ERROR  Failed to compile with 1 errors                                           3:19:28 PM
error  in ./~/slick-carousel/slick/slick.scss
Module build failed: TypeError: Cannot read property '0' of null

Adjoining Classes

I started to wonder if it had to do with the  adjoining classes that were generated – at least by the online compiler – like

.slick-slide.slick-loading

 These were also in the slick.css file, but not used by the vue components. So still wasn’t sure whether this was the real issue. And I really was not planning on changing generated module css. That and most linters would online issue warnings as adjoining classes are only an issue for IE 6 and older.

Box Sizing Property the cause?

Another property box-sizing got a warning as it does not work for IE6-7. Again not really something that should cause the parsing issue now should it?

Day after hangover

The next day when I wanted to to an:

npm run dev

to back to a state it had before and kind of functional I had permission errors

95% emittingError: EACCES: permission denied, open '/usr/share/nginx/app/public/mix-manifest.json'

When I fixed the files that all of the sudden had www-data as owner I had another error

> @ dev /usr/share/nginx/app
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
undefined:1
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)

I decided to do a:

git checkout .

and then I couldn’t as there were merger issues with the auto generated css and javascript. So I had to

git reset

those files one by one and then do another git checkout . . After that npm run dev worked again.

Latest Git Pull Check

Started to wonder if another partner of mine had done git pull. I did a:

stat -c %y .git/FETCH_HEAD
2017-05-24 17:13:14.573392353 +0200

NB Tip found at SO here

And realized there had been one. Only the built had not worked out somehow. Anyways all well again.

Slick.scss Production Error

The search for the production slick.scss issue continues….