irispixel/vscode-dartsass

ERR_INVALID_ARG_TYPE when leaving Sass Bin Path blank

Closed this issue · 25 comments

Since a few days this message comes up when I try to compile my SCSS:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined


When I enter the path to the sass.dart.js file in "Sass Bin Path", I get a different error:

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o...


I have been using DartSass for a long time and never had the error before.
The problem also occurs on other devices.

Update:
As it seems, the problem is related to the latest VS code version (V1.56.2). One solution would be to use an older version, such as version 1.55.2.

Can you share which version of vscode are you using so I can reproduce the same

Can you share which version of vscode are you using so I can reproduce the same

I'm using VS Code Version 1.56.2.

Update:

I downloaded the VS Code Version 1.55.2 and it works just fine with it.
It seems that the latest version is causing problems with DartSass.

Thanks for the additional info on debugging. Much helpful.

Let me go through the changelog (of vscode) and see what has changed recently and roll out a fix for the same.

I have the same issue since a recent update

So I had rolled out a recent update of the plugin.

Tested the same on

Version: 1.56.2
Electron: 12.0.4
Node.js: 14.16.0
chrome: 89.0
v8: 8.9.255.24-electron.0
os: Linux x64 5.11

With the new update - things work.

oh - the most important thing :

sassBinPath set to node_modules/.bin/sass ( because this was on ubuntu linux )

Can you help check if this still works.

If not - let me know if any of the above changes for you locally in your settings. ( Help - > About ) .

For me it's not working in win64

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o

if i disable autoprefixer it's working so I guess that's where the issue lies

Thanks , @lekoala for helping debug this on windows.

So - the latest version of the codelios.dartsass plugin is 0.7.5 . I hope that is the one - you are using.

Meanwhile - may be this has something to do with postcss api ( used when we 'enable' autoprefixer ) .

There is another issue here - jeffjewiss/ember-cli-postcss#594 - that talks about postcss and sourcemaps . probably we are encountering something similar although not related directly.

need to debug this one further.

For me it's not working in win64

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o

if i disable autoprefixer it's working so I guess that's where the issue lies

I have the same problem (and running also on win64), but a different error message (i.e. the one I had originally when entering the bin path *).
However, with the deactivation of Auto Prefixer, it also works on the latest version.


*TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

@JueK3y @lekoala - just to confirm - is -sassBinPath property set - when you encounter this error .

If so - what platform is it running on ? ( windows / Linux / *nix )

So - I had made a newer release 0.8.1 .

Provides a way to specify encoding of the source files.

Also added a bit of debugging statements -

  Log.debug(`Postcss: About to process`);
  Log.debug(`Postcss: processor.process completed`);
  Log.debug(`doAutoprefixCSS completed to ${output}`);
  Log.debug(`writeCSSFile completed to ${output}`);

If you do happen to see those debug messages in Output -> DartJs Sass selector - do let me know what you see (and what you do not ) so I can try to debug the same.

[ Of course - kindly enable dartsass.debug to be true in your workspace to see those debug statements in the first place ].

So far with autoprefixer enabled and me working on Linux - I am unable to reproduce the same . Hence need your help in trying to pin this down. Thanks again.

The css file gets compiled (but not the minified file). If I choose "minify only", i get the min file but i still get the error. The file is autoprefixed so i don't know exactly what's wrong. It's never reaching the log line writeCSSFile so i guess it's somewhere in between :-D

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o

Here is the log

DEBUG: About to compile current file: [somepath][somepath]\scss\admin.scss
DEBUG: Run: Cwd: [somepath]. Exec: node.exe C:\Users\user\AppData\Roaming\npm\node_modules\sass\sass.js [somepath]\scss\admin.scss:[somepath]\css\admin.css launched with pid 3220
DEBUG: Postcss: About to process
DEBUG: Postcss: processor.process completed
DEBUG: doAutoprefixCSS completed to [somepath][somepath]\css\admin.css

Interesting .

So - something is wrong when the css output is being written.

This plugin depends on the other library - I have refactored for the purpose - dartsass-plugin-common which does almost all the heavy lifting.

Specifically - this file - autoprefix.ts contains the logic.

So I wonder if the output of the postcss ( that is being written ) is not correct.

Also - it is puzzling I am unable to reproduce this on Linux. Anyhow I will continue to debug this further.

Thanks for your patience meanwhile.

as far as I can tell, the error is the following

https://github.com/codelios/dartsass-plugin-common/blob/f8fadf54fd1215556300baf04e3734a3caa10ac9/src/fileutil.ts#L10-L13

writeCSSFile expects a "data" string but doAutoPrefixCSS returns an object

https://github.com/codelios/dartsass-plugin-common/blob/f8fadf54fd1215556300baf04e3734a3caa10ac9/src/autoprefix.ts#L50-L53

therefore we get the error received an object instead of a string. Maybe I'm wrong but that seems to make sense.

as far as I can tell, the error is the following

The next line happens to be - writeCSSFile - that takes in the data and the output file name.

So far so good.

I do understand that the convention is definitely awkward for the API - where the first argument is usually the output file name followed by data.

But this part of the code has remained that way for sometime that I fail to understand why it should fail now.

So - there is something else that is missing.

Specifically it seems to fail on Windows - with autoprefixer on ( that involves postcss API ) .

Do you have a node version that you use ? Can you help paste - "Help -> About" and see what is going on ?

Meanwhile - I happened to upgrade postcss to 8.3.0 and sass to 1.33.0 .

I had made a newer release 0.8.3 .

Added the following lines to debug as well to pin down writeCSSFile further.

  Log.debug(`wrote raw css file to ${filename}`);
  Log.debug(`wrote css.map file to ${sourceMapFile}`);

Let me know if you see anything along these lines in the debug log.

So I was able to get access to a windows box.

I tried the same again with the latest version of the plugin.

Help -> About indicated the following.

Version: 1.56.2 (user setup)
Commit: 054a9295330880ed74ceaedda236253b4f39a335
Date: 2021-05-12T17:13:13.157Z
Electron: 12.0.4
Chrome: 89.0.4389.114
Node.js: 14.16.0
V8: 8.9.255.24-electron.0
OS: Windows_NT x64 10.0.19043

sassBinPath has been set.

With the latest - the code does seem to compile when we "watch" a directory.

Let me know what you see.

So I'm trying with this

Version: 1.56.2 (system setup)
Commit: 054a9295330880ed74ceaedda236253b4f39a335
Date: 2021-05-12T17:13:13.157Z
Electron: 12.0.4
Chrome: 89.0.4389.114
Node.js: 14.16.0
V8: 8.9.255.24-electron.0
OS: Windows_NT x64 10.0.19041

And getting the following

DEBUG: About to compile current file: f:\www\[path]\scss\admin.scss
DEBUG: Run: Cwd: f:\www\[path] Exec: node.exe C:\Users\myuser\AppData\Roaming\npm\node_modules\sass\sass.js  [path]\scss\admin.scss:[path]\client\css\admin.css launched with pid 20968
DEBUG: Postcss: About to process
DEBUG: Postcss: processor.process completed
DEBUG: doAutoprefixCSS completed to f:\www[path]\client\css\admin.css
DEBUG: wrote raw css file to f:\www\[path]\client\css\admin.css

After the last line, I get

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of o

I'm using version 0.8.3 of your plugin. Disabling autoprefixer removes the issue.
I'm using a custom output path so maybe that's the difference

So it is failing when it is trying to write the css sourcemap - when autoprefix is enabled.

May be - autoprefix can be enabled still but dartsass.disableSourceMap can be set to true.

This should (temporarily) fix the problem.

Of course, source maps will not be there.

Something seems to go amiss with the output of autoprefixer where the source map being generated from the autoprefixer does not sound right . ( I am unable to reproduce this in windows as well ).

Needs debugging still.

As confirmation: When the source map is disabled, no error occurs. Also, when Auto prefixer is disabled, no error occurs either.

So - I have made a patch release 0.8.5 minutes ago.

Please let me know if this fixes writing sourcemaps as I am explicitly converting the json to a string. Hopefully that should fix those type errors.

no more errors for me with the new release and autoprefixer works! thanks

Same here, no problems with the update. Thanks a lot!

I am happy that this works .

While I still wonder why I was not able to reproduce it locally on my box - at least happy this does the job now.

Thanks @lekoala and @JueK3y-Prv for your patience.

So - there was a (regression) bug where when we "watch" a directory - the minified files were not getting their ".map" generated.

Recent version (of the plugin ) v0.8.6 released that should fix that problem. FYI .

In case you like the plugin - feel free to "star" the plugin in the vscode plugin page ( Hint: 5 starts would be helpful ! :) )

In case you like the plugin - feel free to "star" the plugin in the vscode plugin page ( Hint: 5 starts would be helpful ! :) )

done ;-)