fourseven:scss@5.0.0-alpha.2 - import bug

[Berchez]

Describe the bug

When importing an SCSS file inside a JSX component in a Meteor.js project using fourseven:scss@5.0.0-alpha.2, the build process fails with the following error:

Error: Surprising path: /imports/ui/components/forms/ImageDropZone.scss//D:/WAL/imports/ui/components/forms/ImageDropZone.scss
    at toDosPath (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:41:13)        
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:100:14
    at Arguments.map (<anonymous>)
    at Object.wrapper [as normalize] (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:96:56)
    at packages/compileScssBatch/plugin/compile-scss.js:257:28
    at Array.map (<anonymous>)
    at SassCompiler.compileOneFile (packages/compileScssBatch/plugin/compile-scss.js:243:45)
    at getResult (packages/caching-compiler/multi-file-caching-compiler.js:113:15)
    at packages/compileScssBatch/plugin/compile-scss.js:68:22
 => awaited here:
    at Promise.await (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:60:12)
    at CssOutputResource.finalize (C:\tools\isobuild\compiler-plugin.js:930:12)
    at CssOutputResource.hasPendingErrors (C:\tools\isobuild\compiler-plugin.js:935:10)
    at CssOutputResource._get (C:\tools\isobuild\compiler-plugin.js:966:14)
    at CssOutputResource.get data [as data] (C:\tools\isobuild\compiler-plugin.js:950:28)
    at C:\tools\isobuild\compiler-plugin.js:738:29
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
 => awaited here:
    at Promise.await (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:60:12)
    at JsOutputResource.finalize (C:\tools\isobuild\compiler-plugin.js:930:12)
    at JsOutputResource.hasPendingErrors (C:\tools\isobuild\compiler-plugin.js:935:10)
    at JsOutputResource.reportPendingErrors (C:\tools\isobuild\compiler-plugin.js:940:14)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1083:14)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:740:14
    at Array.forEach (<anonymous>)
    at ImportScanner.scanImports (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:738:22)
    at C:\tools\isobuild\compiler-plugin.js:1380:17
    at Array.forEach (<anonymous>)
    at Function.computeJsOutputFilesMap (C:\tools\isobuild\compiler-plugin.js:1345:19)
    at ClientTarget._emitResources (C:\tools\isobuild\bundler.js:1164:8)
    at C:\tools\isobuild\bundler.js:862:12
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at ClientTarget.make (C:\tools\isobuild\bundler.js:850:18)
    at C:\tools\isobuild\bundler.js:3281:14
    at C:\tools\isobuild\bundler.js:3441:25
    at Array.forEach (<anonymous>)
    at C:\tools\isobuild\bundler.js:3395:14
    at Object.capture (C:\tools\utils\buildmessage.js:283:5)
    at bundle (C:\tools\isobuild\bundler.js:3262:31)
    at C:\tools\isobuild\bundler.js:3205:32
    at Slot.withValue (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.esm.js:69:29)
    at Object.withCache (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1543:39)
    at Object.bundle (C:\tools\isobuild\bundler.js:3205:16)
    at C:\tools\runners\run-app.js:579:24
    at Function.run (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
    at bundleApp (C:\tools\runners\run-app.js:578:34)
    at AppRunner._runOnce (C:\tools\runners\run-app.js:625:35)
    at AppRunner._fiber (C:\tools\runners\run-app.js:947:28)
    at C:\tools\runners\run-app.js:408:12

In this example I am importing ImageDropZone.scss inside the ImageDropZone.jsx component, both are in the same folder so I import them with a simple import './ImageDropZone.scss'.

In this example I showed it with ImageDropZone but the same happens with any other component.

This started happening after migrating fourseven:scss@4.16.0 to fourseven:scss@5.0.0-alpha.2.

To Reproduce

Steps to reproduce the behavior:

1. Import a scss file inside a component
2. Run the Meteor project with meteor run.
3. The error is displayed in the console during the build process.

Expected behavior

The SCSS file should be compiled and included in the final build without errors.

Screenshots

[github-actions]

Thank you for submitting this issue!

We, the Members of Meteor Community Packages take every issue seriously.
Our goal is to provide long-term lifecycles for packages and keep up
with the newest changes in Meteor and the overall NodeJs/JavaScript ecosystem.

However, we contribute to these packages mostly in our free time.
Therefore, we can't guarantee your issues to be solved within certain time.

If you think this issue is trivial to solve, don't hesitate to submit
a pull request, too! We will accompany you in the process with reviews and hints
on how to get development set up.

Please also consider sponsoring the maintainers of the package.
If you don't know who is currently maintaining this package, just leave a comment
and we'll let you know

[illusionfield]

I created a sample application that should theoretically resemble the problematic environment. It worked fine on macOS and Linux, so it's likely a Windows-specific issue. I only have an ARM64 Windows device, but I'm trying to get access to an x64 Windows machine to reproduce the problem there.

@Berchez Could you help by downloading the sample repo (https://github.com/illusionfield/meteor-scss-327-bug) and checking if the issue occurs there as well? It would be great to know if I managed to reproduce the problem.

Thx

[Berchez]

Sorry for not saying in advance that it was Windows. And yes, same error in your project:

[[[[[ C:\Users\Usuário\Downloads\meteor-scss-327-bug-main\meteor-scss-327-bug-main ]]]]]

=> Started proxy.
=> Started HMR server.
=> Meteor 3.1.2 is available. Check the changelog https://docs.meteor.com/changelog.html and update this project with 'meteor update'.
compileScssBatch: updating npm dependencies -- sass...
[ SASS Compiler ] The following external files were loaded but are not tracked by the project:
 - /C:/Users/Usuário/Downloads/meteor-scss-327-bug-main/meteor-scss-327-bug-main/client/main.scss
[ SASS Compiler ] The following external files were loaded but are not tracked by the project:
 - /C:/Users/Usuário/Downloads/meteor-scss-327-bug-main/meteor-scss-327-bug-main/imports/ui/components/tmp/Tmp.scss
C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:218
      throw error;
      ^

Error: Surprising path: /imports/ui/components/tmp/Tmp.scss//C:/Users/Usuário/Downloads/meteor-scss-327-bug-main/meteor-scss-327-bug-main/imports/ui/components/tmp/Tmp.scss
    at toDosPath (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:41:13)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:100:14
    at Arguments.map (<anonymous>)
    at Object.wrapper [as normalize] (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\static-assets\server\tools\static-assets\server\mini-files.ts:96:56)
    at packages/compileScssBatch/plugin/compile-scss.js:254:28
    at Array.map (<anonymous>)
    at packages/compileScssBatch/plugin/compile-scss.js:240:45
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
 => awaited here:
    at Function.Promise.await (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:56:12)    
    at getResult (packages/caching-compiler/multi-file-caching-compiler.js:113:21)
    at packages/compileScssBatch/plugin/compile-scss.js:61:28
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
 => awaited here:
    at Promise.await (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:60:12)
    at CssOutputResource.finalize (C:\tools\isobuild\compiler-plugin.js:930:12)
    at CssOutputResource.hasPendingErrors (C:\tools\isobuild\compiler-plugin.js:935:10)
    at CssOutputResource._get (C:\tools\isobuild\compiler-plugin.js:966:14)
    at CssOutputResource.get data [as data] (C:\tools\isobuild\compiler-plugin.js:950:28)
    at CompilerPluginProcessor.minifyCssResource (C:\tools\isobuild\bundler.js:1128:22)
    at C:\tools\isobuild\compiler-plugin.js:733:12
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\fiber_pool.js:43:40
 => awaited here:
    at Promise.await (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:60:12)
    at JsOutputResource.finalize (C:\tools\isobuild\compiler-plugin.js:930:12)
    at JsOutputResource.hasPendingErrors (C:\tools\isobuild\compiler-plugin.js:935:10)
    at JsOutputResource.reportPendingErrors (C:\tools\isobuild\compiler-plugin.js:940:14)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1083:14)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1142:14
    at each (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore-node-f-pre.js:1321:7)
    at ImportScanner.scanFile (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:1105:5)
    at C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:740:14
    at Array.forEach (<anonymous>)
    at ImportScanner.scanImports (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\isobuild\tools\isobuild\import-scanner.ts:738:22)
    at C:\tools\isobuild\compiler-plugin.js:1380:17
    at Array.forEach (<anonymous>)
    at Function.computeJsOutputFilesMap (C:\tools\isobuild\compiler-plugin.js:1345:19)
    at ClientTarget._emitResources (C:\tools\isobuild\bundler.js:1164:8)
    at C:\tools\isobuild\bundler.js:862:12
    at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
    at ClientTarget.make (C:\tools\isobuild\bundler.js:850:18)
    at C:\tools\isobuild\bundler.js:3281:14
    at C:\tools\isobuild\bundler.js:3441:25
    at Array.forEach (<anonymous>)
    at C:\tools\isobuild\bundler.js:3395:14
    at Object.capture (C:\tools\utils\buildmessage.js:283:5)
    at bundle (C:\tools\isobuild\bundler.js:3262:31)
    at C:\tools\isobuild\bundler.js:3205:32
    at Slot.withValue (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.esm.js:69:29)
    at Object.withCache (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1543:39)
    at Object.bundle (C:\tools\isobuild\bundler.js:3205:16)
    at C:\tools\runners\run-app.js:579:24
    at Function.run (C:\Users\Usuário\AppData\Local\.meteor\packages\meteor-tool\2.16.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
    at bundleApp (C:\tools\runners\run-app.js:578:34)
    at AppRunner._runOnce (C:\tools\runners\run-app.js:625:35)
    at AppRunner._fiber (C:\tools\runners\run-app.js:947:28)
    at C:\tools\runners\run-app.js:408:12

[Berchez]

In my Linux environment, both your sample project and the project I am working on are working.

[illusionfield]

In my Linux environment, both your sample project and the project I am working on are working.

Thanks a lot for the feedback, that's great news! However, it should also work on Windows, so it's really good that this issue was discovered at such an early stage.

[illusionfield]

@Berchez

I just updated the projects. Could you try again on Windows with the following repos?

• https://github.com/illusionfield/meteor-scss-327-bug
• https://github.com/illusionfield/meteor-scss-324-bug/tree/main/sass_tests/sass_forked

I tested them in several ways, and they worked on my end, but it would be great to get some more feedback.
Thanks a lot!

[Berchez]

@illusionfield both compiled. But I have some logs in the terminal (I don't know if it's normal)

1 repo

2 repo

[illusionfield]

@Berchez
It's getting better, but here it doesn't recognize the file in the tracked file list. I suspect it might be due to some special character in the path. I’m going to test how it behaves with spaces and non-Latin characters in the home directory path.

By the way, is the sourcemap working correctly? And if you modify the SCSS file, does it trigger a rebuild? If yes, then it’s likely just the output message that’s incorrect.

[Berchez]

@illusionfield
Exactly, the error occurs because my directory contains the word "Usuário".
I tested it in another directory without accents and then no logs appeared.
And yes, changes in .scss files cause a rerender.

Thanks for your help.
Looking forward to fourseven:scss@5.0.0-alpha.3

[illusionfield]

Great, thanks for confirming that! It's good to know that the issue is related to accented characters in the path. I'll work on a fix for that.

Awesome to hear that the sourcemap and rerendering are working as expected. I'll aim to resolve the logging issue in the next release.

Regarding the The following external files were loaded but are not tracked by the project warning—its purpose is to alert you when an external source is imported that isn’t being watched by Meteor’s file watcher. This means that while the resource is included in the project, changes to it won’t trigger a rebuild automatically. So if you modify the external source, you’ll need to stop and restart the application for the updated version to take effect.

On the upside, this plugin feature allows you to use external sources like @use "E:\\my-sass-framework\\mixins" as * across multiple Meteor projects without needing to create additional Meteor packages, duplicate files, or deal with symlinks. It's a more flexible way to share SCSS resources across projects.

Thanks again for your patience and feedback!