CODEWITHSUNDEEP
javascriptnode.jsgulpnode-modules
Matt Komarnicki
Matt Komarnicki

Reputation: 5422

Running gulp gives "path.js:7 throw new TypeError('Path must be a string. Received ' + inspect(path));"

In my Wordpress project I'm using Laravel Elixir to deal with assets. Everything was working till today.

Now every time I run gulp I'm getting:

$ gulp
path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received { includePaths:
   [ 'bower_components/foundation-sites/scss/',
     'bower_components/slick-carousel/slick' ] }
    at assertPath (path.js:7:11)
    at Object.join (path.js:1211:7)
    at prefixOne (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/tasks/GulpPaths.js:143:43)
    at GulpPaths.prefix (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/tasks/GulpPaths.js:153:20)
    at GulpPaths.src (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/tasks/GulpPaths.js:44:25)
    at getPaths (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/tasks/recipes/sass.js:33:33)
    at Function.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/tasks/recipes/sass.js:21:33)
    at Function.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/bootstrap/EnableExtension.js:16:18)
    at /Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/gulpfile.js:7:9
    at global.Elixir (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/laravel-elixir/dist/index.js:21:5)

enter image description here

I thought that maybe there is something wrong with my node_modules directory, so I did rm -rf node_modules and then npm install as usual. Everything was pulled but at the end I saw:

├── UNMET PEER DEPENDENCY stream-browserify@*

enter image description here

I have no idea whether this unmet dependency is the reason. If this can help, this is the output of particular versions of the software I have:

node -v

v7.0.0

npm -v

3.10.8

gulp -v

[12:26:22] CLI version 3.9.1 [12:26:22] Local version 3.9.1

Here is my gulpfile.js.

It doesn't like an array from includePaths? Can I ask for some help? Thank you.

edit:

This is my package.json:

{
  "name": "slick",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-2"
  }
}

Upvotes: 2

Views: 4987

Answers (1)

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

This solution helped me: https://stackoverflow.com/a/40047852/4197938

The problem is that the options have been moved from the third to the fourth parameter.

So I simply added additional null before includePaths.

mix.sass('app.scss', null, null <- THIS IS THE SOLUTION, {

Then running gulp gave

$ gulp
[13:15:29] Using gulpfile ~/Code/Komarnicki2/wp-content/themes/komarnicki/gulpfile.js
[13:15:29] Starting 'all'...
[13:15:29] Starting 'sass'...
[13:15:29] 'sass' errored after 60 ms
[13:15:29] Error: Missing binding /Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/node-sass/vendor/darwin-x64-51/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 7.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.
    at Object.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/node-sass/lib/index.js:15:11)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/gulp-sass/index.js:187:21)
    at Module._compile (module.js:573:32)
[13:15:29] 'all' errored after 63 ms
[13:15:29] Error in plugin 'run-sequence(sass)'
Message:
    Missing binding /Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/node-sass/vendor/darwin-x64-51/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 7.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.
Stack:
Error: Missing binding /Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/node-sass/vendor/darwin-x64-51/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 7.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to build the binding for your current environment.
    at Object.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/node-sass/lib/index.js:15:11)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/slick/Code/Komarnicki2/wp-content/themes/komarnicki/node_modules/gulp-sass/index.js:187:21)
    at Module._compile (module.js:573:32)

so then I did exactly what was written in the output

npm rebuild node-sass

and the finally gulp did work

$ gulp
[13:20:18] Using gulpfile ~/Code/Komarnicki2/wp-content/themes/komarnicki/gulpfile.js
[13:20:18] Starting 'all'...
[13:20:18] Starting 'sass'...
[13:20:19] Finished 'sass' after 900 ms
[13:20:19] Starting 'scripts'...
[13:20:19] Finished 'scripts' after 96 ms
[13:20:19] Starting 'copy'...
[13:20:19] Finished 'copy' after 52 ms
[13:20:19] Starting 'version'...
[13:20:19] Finished 'version' after 56 ms
[13:20:19] Finished 'all' after 1.11 s
[13:20:19] Starting 'default'...
┌───────────────┬──────────────────────────┬─────────────────────────────────────────────────────────────────────────────┬────────────────────┐
│ Task          │ Summary                  │ Source Files                                                                │ Destination        │
├───────────────┼──────────────────────────┼─────────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass        │ assets/sass/app.scss                                                        │ public/css/app.css │
│               │ 2. Autoprefixing CSS     │                                                                             │                    │
│               │ 3. Concatenating Files   │                                                                             │                    │
│               │ 4. Writing Source Maps   │                                                                             │                    │
│               │ 5. Saving to Destination │                                                                             │                    │
├───────────────┼──────────────────────────┼─────────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ mix.scripts() │ 1. Concatenating Files   │ bower_components/fontfaceobserver/fontfaceobserver.js                       │ public/js/all.js   │
│               │ 2. Writing Source Maps   │ assets/js/font.loader.js                                                    │                    │
│               │ 3. Saving to Destination │ bower_components/jquery/dist/jquery.min.js                                  │                    │
│               │                          │ bower_components/foundation-sites/dist/foundation.min.js                    │                    │
│               │                          │ bower_components/moment/moment.js                                           │                    │
│               │                          │ bower_components/moment/locale/pl.js                                        │                    │
│               │                          │ bower_components/bLazy/blazy.js                                             │                    │
│               │                          │ bower_components/jQuery-viewport-checker/dist/jquery.viewportchecker.min.js │                    │
│               │                          │ bower_components/slick-carousel/slick/slick.min.js                          │                    │
│               │                          │ bower_components/masonry/dist/masonry.pkgd.js                               │                    │
│               │                          │ bower_components/imagesloaded/imagesloaded.pkgd.js                          │                    │
│               │                          │ bower_components/magnific-popup/dist/jquery.magnific-popup.js               │                    │
│               │                          │ assets/js/scripts.js                                                        │                    │
│               │                          │ assets/js/modules/*.js                                                      │                    │
│               │                          │ assets/js/other/*.js                                                        │                    │
├───────────────┼──────────────────────────┼─────────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ mix.copy()    │ 1. Saving to Destination │ assets/fonts//**/*                                                          │ public/fonts/      │
├───────────────┼──────────────────────────┼─────────────────────────────────────────────────────────────────────────────┼────────────────────┤
│ mix.version() │ 1. Versioning            │ public/css/app.css                                                          │ public/build       │
│               │ 2. Rewriting File Paths  │ public/js/all.js                                                            │                    │
│               │ 3. Saving to Destination │                                                                             │                    │
│               │ 4. Copying Source Maps   │                                                                             │                    │
└───────────────┴──────────────────────────┴─────────────────────────────────────────────────────────────────────────────┴────────────────────┘
[13:20:19] Finished 'default' after 6.65 ms

I still have no idea why all that happened. Was that because recently I was messing with brew stuff while creating my shell scripts (brew install node)? It's great that my problem is solved but I'm unhappy by not knowing what caused it. Still can someone contribute and tell me what went wrong?

  • Why the syntax has been changed?
  • Why array of paths went to 4-th place in the list of args?
  • How can I avoid that in the future?
  • What if someone will decide to add 5th, 6th arg?

Was that because of dependency version mismatch? Now I'm affraid that this can happen in the future as well...

Upvotes: 0

Related Questions