New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

`parcel serve` hangs when importing multiple sass files #1836

Closed
alappe opened this Issue Aug 2, 2018 · 8 comments

Comments

Projects
None yet
5 participants
@alappe

alappe commented Aug 2, 2018

馃悰 bug report

I'm having issues with importing the same .scss file in multiple vue components. This works in up to three components.

馃帥 Configuration (.babelrc, package.json, cli command)

See https://github.com/zimmer7/parcel_vue_scss_import_issue for a minimal testcase 鈥 npm run works serves, npm run broken breaks parcel.

馃 Expected Behavior

I should be able to use the same e.g. _variables.scss file in all of my components.

馃槸 Current Behavior

parcel serve hangs.

馃拋 Possible Solution

No clue :-(

馃敠 Context

馃捇 Code Sample

https://github.com/zimmer7/parcel_vue_scss_import_issue

馃實 Your Environment

Software Version(s)
Parcel 1.9.7
Node 10.7
npm/Yarn 6.1.0
Operating System macOS
@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Aug 2, 2018

This is a known bug, my current best advice is don't use sass (or try figure out why this happens and report to node-sass)

It has to do with the sass-node runtime not being able to handle multiple async concurrent calls. Probably an issue in their C code, although I might be wrong, haven't debugged it at all, just narrowed a very similar bug down to not getting a response from sass transpile.

Sidenote: This issue is probably a duplicate of another issue.

@pille72

This comment has been minimized.

pille72 commented Aug 3, 2018

I have the same issue in my setup. Just tried the minimal testcase above with a quick vue/webpack setup: https://github.com/pille72/webpack_vue_scss_import_issue. Looks like that importing sass files is not a problem there, it also uses node-sass. If you ran npm i && npm run build the generated css file creates the scoped styles just fine.

Don't know what the internal differences are, but I think it's a common use case to use scoped styles in vue components in sass and import some globals / vars.

Maybe anyone has some ideas where to look at?

@DeMoorJasper DeMoorJasper changed the title from `parcel serve` hangs if multiple .vue components import the same .scss file to `parcel serve` hangs when using multiple sass files Aug 3, 2018

@DeMoorJasper DeMoorJasper changed the title from `parcel serve` hangs when using multiple sass files to `parcel serve` hangs when importing multiple sass files Aug 3, 2018

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Aug 3, 2018

Currently working on making parcel default to dart-sass, but still support node-sass. (See #1509)

Will update with a PR shortly.

Dart-sass appears to be way stricter and throws all kinds of errors (which is a good thing). And it will probably prevent the freezing as it uses js (or at least is compiled to js)

@tmchng

This comment has been minimized.

tmchng commented Aug 7, 2018

I think I'm having a similar problem, but without the Vue part. My build freezes when I try to bundle only html+sass, and it runs fine if I comment out some common sass imports.

I discovered that there's an option called warmWorkers that is hard-coded to true inside WorkerFarm.js. My build no longer freezes after I set it to false. I have not had the time to investigate why though.

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Aug 7, 2018

@tmchng could you try with #1847 ?

It's probably not related to warmWorkers, warmWorkers probably just spawns too much async calls to node-sass

@alappe

This comment has been minimized.

alappe commented Aug 8, 2018

With #1847 and my linked case above I now get a new error:

nd@style /tmp/parcel_vue_scss_import_issue (master) 鈾 npm run works                                                                                                                                                                                                                                                                                                 14:07

> testcase@1.0.0 works /private/tmp/parcel_vue_scss_import_issue
> parcel serve --no-cache works.js

Server running at http://localhost:1234
馃毃  /private/tmp/parcel_vue_scss_import_issue/u.vue: Cannot read property 'walk' of null
    at HTMLAsset.generate (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/assets/HTMLAsset.js:184:14)
    at HTMLAsset.process (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/Asset.js:205:35)
^C
nd@style /tmp/parcel_vue_scss_import_issue (master) 鈾 
nd@style /tmp/parcel_vue_scss_import_issue (master) 鈾 npm run broken                                                                                                                                                                                                                                                                                                14:07

> testcase@1.0.0 broken /private/tmp/parcel_vue_scss_import_issue
> parcel serve --no-cache broken.js

Server running at http://localhost:1234
馃毃  /private/tmp/parcel_vue_scss_import_issue/u.vue: Cannot read property 'walk' of null
    at HTMLAsset.generate (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/assets/HTMLAsset.js:184:14)
    at HTMLAsset.process (/private/tmp/parcel_vue_scss_import_issue/node_modules/parcel/src/Asset.js:205:35)
^C
nd@style /tmp/parcel_vue_scss_import_issue (master) 鈾 
@BBlackwo

This comment has been minimized.

BBlackwo commented Aug 10, 2018

Came here via #1583. I tried your branch parcel-bundler/parcel#feature/dart-sass @DeMoorJasper and now I'm getting a whole bunch of sass build errors like:

Error: expected "{".
@import "../../some-file.scss";

I fix that then I get more errors. Was previously using node-sass@4.8.3.

@DeMoorJasper

This comment has been minimized.

Member

DeMoorJasper commented Aug 10, 2018

@BBlackwo Yeah dart-sass is way stricter on sass syntax, not much I can do about it, unless there is an option to disable it.

At least it shows things like codeFrames and decent errors, which node-sass did not

DeMoorJasper added a commit that referenced this issue Aug 16, 2018

Default to Dart-Sass and add backwards compatibility for node-sass (#鈥
鈥1847)

Dart sass will prevent parcel from randomly freezing.
It's also a lot stricter, preventing unknown errors or side-effects after compiling/parsing.
Also adds codeFrames, so users get a visual representation of the line the error occurs.

Closes #1836 Related to #1509

devongovett pushed a commit that referenced this issue Oct 15, 2018

Default to Dart-Sass and add backwards compatibility for node-sass (#鈥
鈥1847)

Dart sass will prevent parcel from randomly freezing.
It's also a lot stricter, preventing unknown errors or side-effects after compiling/parsing.
Also adds codeFrames, so users get a visual representation of the line the error occurs.

Closes #1836 Related to #1509

devongovett pushed a commit that referenced this issue Oct 15, 2018

Default to Dart-Sass and add backwards compatibility for node-sass (#鈥
鈥1847)

Dart sass will prevent parcel from randomly freezing.
It's also a lot stricter, preventing unknown errors or side-effects after compiling/parsing.
Also adds codeFrames, so users get a visual representation of the line the error occurs.

Closes #1836 Related to #1509
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment