Laravel-mix: Imported Stylus files can't be compiled with Laravel Mix 2.1.8

Created on 19 Mar 2018 · 4Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 2.1.8
Node Version: 9.2
NPM Version: 5.6.0
Yarn Version: 1.5.1
OS: Windows 7 SP1

Description:

Since _Laravel Mix_ 2.1.8 it's not possible to compile stylus files which have other stylus files imported.
_Single File Vue Components_ with imported stylus files in the <style scoped lang="stylus"> area can't be compiled too.

With lower versions of _Laravel Mix_ everything is fine.

Steps To Reproduce:

Create these two stylus files (app.styl, colors.styl) in the same folder.

// colors.styl

color_red  = #ff0000
color_blue = #0000ff

// app.styl

@import "colors.styl"

body
  color color_red

Try to compile the app.stylus file with the mix.stylus() method.

Result:

error  in ./app.styl

Module build failed: ModuleBuildError: Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
    at assertPath (path.js:28:11)
    at Object.normalize (path.js:346:5)
    at normalizePaths (C:\test\node_modules\stylus-loader\lib\pathcache.js:301:21)
    at stylusFile (C:\test\node_modules\stylus-loader\lib\pathcache.js:102:14)
    at C:\test\node_modules\stylus-loader\lib\pathcache.js:159:32
    at tryCatchResolve (C:\test\node_modules\when\lib\apply.js:46:23)
    at callAndResolve (C:\test\node_modules\when\lib\apply.js:30:12)
    at callAndResolveNext (C:\test\node_modules\when\lib\apply.js:40:4)
    at tryCatchReject3 (C:\test\node_modules\when\lib\makePromise.js:851:7)
    at runContinuation3 (C:\test\node_modules\when\lib\makePromise.js:809:4)
    at Fulfilled.fold (C:\test\node_modules\when\lib\makePromise.js:586:4)
    at callAndResolve (C:\test\node_modules\when\lib\apply.js:34:12)
    at callAndResolveNext (C:\test\node_modules\when\lib\apply.js:40:4)
    at tryCatchReject3 (C:\test\node_modules\when\lib\makePromise.js:851:7)
    at runContinuation3 (C:\test\node_modules\when\lib\makePromise.js:809:4)
    at Fulfilled.fold (C:\test\node_modules\when\lib\makePromise.js:586:4)
    at callAndResolve (C:\test\node_modules\when\lib\apply.js:34:12)
    at callAndResolveNext (C:\test\node_modules\when\lib\apply.js:40:4)
    at tryCatchReject3 (C:\test\node_modules\when\lib\makePromise.js:851:7)
    at runContinuation3 (C:\test\node_modules\when\lib\makePromise.js:809:4)
    at Fulfilled.fold (C:\test\node_modules\when\lib\makePromise.js:586:4)
    at callAndResolve (C:\test\node_modules\when\lib\apply.js:34:12)
    at apply (C:\test\node_modules\when\lib\apply.js:23:4)
    at C:\test\node_modules\when\lib\decorators\array.js:279:12
    at Array.reduce (<anonymous>)
    at Function.reduce (C:\test\node_modules\when\lib\decorators\array.js:258:37)
    at tryCatchResolve (C:\test\node_modules\when\lib\apply.js:46:23)
    at callAndResolve (C:\test\node_modules\when\lib\apply.js:30:12)
    at callAndResolveNext (C:\test\node_modules\when\lib\apply.js:40:4)
    at tryCatchReject3 (C:\test\node_modules\when\lib\makePromise.js:851:7)
    at runLoaders (C:\test\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\test\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\test\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (C:\test\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at tryCatchReject (C:\test\node_modules\when\lib\makePromise.js:840:30)
    at runContinuation1 (C:\test\node_modules\when\lib\makePromise.js:799:4)
    at Rejected.when (C:\test\node_modules\when\lib\makePromise.js:623:4)
    at Pending.run (C:\test\node_modules\when\lib\makePromise.js:481:13)
    at Scheduler._drain (C:\test\node_modules\when\lib\Scheduler.js:62:19)
    at Scheduler.drain (C:\test\node_modules\when\lib\Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Source

cworreschk

Most helpful comment

Laravel Mix Version: 2.1.8
Node Version: 8.9.4
NPM Version: 5.7.1
OS: Linux Mint 18.2 x86_64

Description

Importing external stylus files results in The "path" argument must be of type string error.

Note

The latest commit does fix the issue for the above mentioned scenario however not for this one.

Steps to reproduce

install npm i vuetify --save
create app.styl

// app.styl
@import '~vuetify/src/stylus/main'

Result

ERROR in ./resources/assets/stylus/app.styl
Module build failed: ModuleBuildError: Module build failed: TypeError: Path must be a string. Received [Function]
    at assertPath (path.js:28:11)
    at Object.normalize (path.js:1212:5)
    at normalizePaths (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:303:21)
    at stylusFile (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:102:14)
    at /mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:159:32
    at tryCatchResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:46:23)
    at callAndResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:30:12)
    at callAndResolveNext (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:40:4)
    at Fold.fulfilled (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:762:11)
    at tryCatchReject (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at runLoaders (/mnt/projects/learning/laravel/gql-exp/node_modules/webpack/lib/NormalModule.js:195:19)
    at /mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at tryCatchReject (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:799:4)
    at Rejected.when (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:623:4)
    at Pending.run (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./resources/assets/stylus/app.styl
 @ multi ./resources/assets/js/main.js ./resources/assets/stylus/app.styl

ERROR in ./resources/assets/stylus/app.styl
Module build failed: ModuleBuildError: Module build failed: TypeError: Path must be a string. Received [Function]
    at assertPath (path.js:28:11)
    at Object.normalize (path.js:1212:5)
    at normalizePaths (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:303:21)
    at stylusFile (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:102:14)
    at /mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:159:32
    at tryCatchResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:46:23)
    at callAndResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:30:12)
    at callAndResolveNext (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:40:4)
    at Fold.fulfilled (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:762:11)
    at tryCatchReject (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at runLoaders (/mnt/projects/learning/laravel/gql-exp/node_modules/webpack/lib/NormalModule.js:195:19)
    at /mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/mnt/projects/learning/laravel/gql-exp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at tryCatchReject (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:799:4)
    at Rejected.when (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:623:4)
    at Pending.run (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./resources/assets/stylus/app.styl
 @ multi ./resources/assets/js/main.js ./resources/assets/stylus/app.styl

ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/stylus-loader??ref--5-4!./resources/assets/stylus/app.styl
Module build failed: TypeError: Path must be a string. Received [Function]
    at assertPath (path.js:28:11)
    at Object.normalize (path.js:1212:5)
    at normalizePaths (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:303:21)
    at stylusFile (/mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:102:14)
    at /mnt/projects/learning/laravel/gql-exp/node_modules/stylus-loader/lib/pathcache.js:159:32
    at tryCatchResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:46:23)
    at callAndResolve (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:30:12)
    at callAndResolveNext (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/apply.js:40:4)
    at Fold.fulfilled (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:762:11)
    at tryCatchReject (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/mnt/projects/learning/laravel/gql-exp/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./resources/assets/stylus/app.styl 4:14-203
 @ multi ./resources/assets/js/main.js ./resources/assets/stylus/app.styl

Possible cause

stylus-loader iterates over paths array that is provided from laravel-mix and calls normalizePath function.
It uses for(var i in paths) which iterates over the array properties.
laravel-mix adds a .tap function to every array and this property appears in the for(var i paths) iteration causing it to fail as it tries to do normalizePath on a function.
Fixing it in stylus-loader is possible by changing the for to for(var i=0; i<paths.length; i++) in pathcache.js

infinity0n3 on 19 Mar 2018

👍3

All 4 comments

Laravel Mix Version: 2.1.8
Node Version: 8.9.4
NPM Version: 5.7.1
OS: Linux Mint 18.2 x86_64