SCSS React library with swc fails to build

[jcguarinpenaranda]

Current Behavior

I created a React UI library, which works ok in dev mode but fails to build.

It seems to be the scss modules are being treated as JS at some point, which should not be as they should be processed before by SASS.

Expected Behavior

I would expect the library to build without problems. Related content on: https://github.com/nrwl/nx/pull/2719

Steps to Reproduce

The setup I have is very minimal, two components in the lib: full-page-wrapper and box The styles for the first component are:

And the react component looks like this

I don't include the second component for the sake of simplicity, but it's also a very simple one. As you see I'm using a .modules.scss file that is imported at the top of the component and then use the key full-page-wrapper coming from the object it returns, that matches what I have in the scss module.

I have tried using the styles and stylePreprocessorOptions options without luck. My project file looks like this:

Also added the assets to be compiled

When I'm working on another app that is connected to this React library in development mode, I have no issue whatsoever and it's very fast. When I build I see the error shown at the top of this issue.

Failure Logs

Environment

Windows 11

[jcguarinpenaranda]

Nx Cloud Run: https://nx.app/runs/btcaeVyltfH

[jcguarinpenaranda]

I found another way of reproducing.

1. Generate a new react library, using --name=test2 --buildable --importPath=@org/scss-test --publishable --compiler=swc
2. Try to build the generated library. Works OK
3. Add any class to the css file generated
4. Try to build again. Error thrown is the same as my original error found. Example: https://nx.app/runs/8zVEWJInpvk

After testing several times, I found using the swc compiler produces the issue. Using babel this does not happen, although it loses the obvious advantage of faster compilation.

[aruke]

I'm having the exact same issue. And I spent hours configuring rollup.config.js for CSS Modules. For folks who are here because of CSS Modules, a tentative fix would be to change the compiler to babel.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[MarcieMarc425]

Is this issue still being investigated? I am having the exact same issue - not being able to use SWC to bundle react libraries with the unexpected token error for css/sass modules.

[MarcieMarc425]

seems like this is no longer an issue when I bump NX version to 14.8.1. (I have not extensively tested which version gets rid of this issue, but I previously was experiencing this issue in NX version 14.3.x)

[mandarini]

I believe that this is no longer an issue in the latest version of Nx. I will be closing this issue. Feel free to ping me to reopen if the issue comes up again!

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.