Webstorm less watcher failed on sourcemap generating

Hi,

Webstorm 2017.2 less watcher failed on sourcemap generating using lessc (default watcher, Win8x64).

My setup:

 

Program: C:\Users\max.a\AppData\Roaming\npm\lessc.cmd

Arguments: --no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less

Output: $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

 

Error.log

cmd.exe /D /C call C:/Users/max.a/AppData/Roaming/npm/lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less
TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.dirname (path.js:715:5)
at render (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:122:34)
at C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:532:9
at Object.<anonymous> (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:535:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

Process finished with exit code 1

 

I tried to run the lessc from command line from the same dir where style.less located:  lessc style.less > style.css - Success

lessc style.less > style.css --source-map=style.css.map - Failed, the similar error log:

f:\server\OSPanel\domains\dev.modli\skin\frontend\boilerplate\default\src\less> lessc style.less > style.css --source-map=style.css.map
TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.dirname (path.js:715:5)
at render (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:122:34)
at C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:532:9
at Object.<anonymous> (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:535:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

 

That's no any problems if I'm using inline sourcemap.

Arguments: --no-color --source-map-inline $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less

Output: $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

 

What's wrong?

 

 

 

10 comments
Comment actions Permalink

Hi there,

You must be missing (very likely) the output file name (where generated CSS code will be saved) ...

 

PhpStorm 2017.3.6 on Windows 10 x64

$ lessc -v
lessc 2.7.3 (Less Compiler) [JavaScript]

Works fine here with these settings:

Arguments:

--no-color --source-map=$FileDir$/$FileNameWithoutExtension$.css.map $FileName$ $FileNameWithoutExtension$.css

or just

--no-color --source-map $FileName$ $FileNameWithoutExtension$.css

Output paths to refresh (I've listed both css and map file so IDE discovers both of them):

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

(The output file will be created next to the source file ... hence no need for specifying the folders etc)

Notice that I've unchecked "Create output file from stdout" as I do specify the target css file in arguments. You may have it enabled (by default). For me it only works this way (since very beginning when I have just started using LESS -- no relation to source maps generation).

 

The actual command executed (just in case):

File in Project View panel (after running file watcher):

 

2
Comment actions Permalink

Thanks for reply, Andriy,

Great, looks like I found the problem. The lessc from command like works ok in lessc --no-color --source-map=style.css.map style.less style.css syntax.

More advanced from upper dir:

lessc --no-color --source-map=dist/css/style.css.map src/less/style.less dist/css/style.css

That's from command line. I'll setup Webstorm a little bit later and report the results. That can bu usefull for somebody else.

Thanks for help!

0
Comment actions Permalink

OMG!

Working:

f:\server\OSPanel\domains\dev.modli> lessc --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

f:\server\OSPanel\domains\dev.modli\skin\frontend\boilerplate\default> lessc --no-color --source-map=dist/css/style.css.map src/less/style.less dist/css/style.css

 

Not working:

Westorm arguments: --no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less
Westorm out: $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

Westorm arguments: --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less
Westorm out: F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

 Log (the same):

cmd.exe /D /C call C:/Users/max.a/AppData/Roaming/npm/lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less
TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.dirname (path.js:715:5)
at render (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:122:34)
at C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:532:9
at Object.<anonymous> (C:\Users\max.a\AppData\Roaming\npm\node_modules\less\bin\lessc:535:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)

Process finished with exit code 1

0
Comment actions Permalink

The method from stoneage that works:

CMD file:

C:\Users\max.a\AppData\Roaming\npm\lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

0
Comment actions Permalink

The method from stoneage that works:

CMD file:

C:\Users\max.a\AppData\Roaming\npm\lessc.cmd --no-color --source-map=F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css.map F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/src/less/style.less F:\server\OSPanel\domains\dev.modli/skin/frontend/boilerplate/default/dist/css/style.css

 

Debugging is terrible. Nothing comparable with grunt-less

Debugging style like "looks like something happpened".

0
Comment actions Permalink

Final absent bracket debug:

ParseError: Unrecognised input. Possibly missing something in F:\server\OSPanel\domains\dev.modli\skin\frontend\boilerplate\default\src\less\layout\_base.less on line 19, column 1:
18
19

0
Comment actions Permalink

>The method from stoneage that works:

Without seeing the project structure and what you have tried (to keep all parameters in File Watcher) -- no idea why you could not make it work that way.

 

>Debugging is terrible. Nothing comparable with grunt-less

That's the output provided by the lessc itself. File Watcher just runs the program with provided parameters.

 

Do not use "Immediate file synchronisation"; allow to run watcher only when you are ready to save the file. I pretty much never see such error.

2
Comment actions Permalink

>Westorm arguments: --no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less

 

the error occurs because you don't pass the path to output file (.css) in Arguments - see https://github.com/less/less.js/issues/2897, https://github.com/less/less.js/issues/3117 and tickets linked to them.

You should have passed dist/css/style.css in Arguments field. Like:

 

--no-color --source-map=$ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css.map $ProjectFileDir$/skin/frontend/boilerplate/default/src/less/style.less $ProjectFileDir$/skin/frontend/boilerplate/default/dist/css/style.css

0
Comment actions Permalink

BTW, can I setup grunt less compiler to use with Webstorm? I like it debugging very much.

0
Comment actions Permalink

Yes, you can run Grunt Less from the tasks tree in Grunt tool window (https://www.jetbrains.com/help/webstorm/2018.1/using-grunt-task-runner.html#ws_grunt_running_tasks_from_tasks_tree) or via the corresponding Run configuration (https://www.jetbrains.com/help/webstorm/2018.1/using-grunt-task-runner.html#ws_grunt_run_debug_task_by_run_configuration). Of course, you need to have Grunt + needed Grnnt modules installed and configured for your project

0

Please sign in to leave a comment.