Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SCSS React library with swc fails to build

See original GitHub issue

Current Behavior

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

imagen

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:

imagen

And the react component looks like this imagen

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: imagen

Also added the assets to be compiled imagen

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

imagen

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:6

Top GitHub Comments

6reactions

jcguarinpenarandacommented, Mar 1, 2022

I found another way of reproducing.

Generate a new react library, using --name=test2 --buildable --importPath=@org/scss-test --publishable --compiler=swc
Try to build the generated library. Works OK
Add any class to the css file generated
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.

0reactions

MarcieMarc425commented, Oct 2, 2022

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)

Top Results From Across the Web

Creating a React Component Library using Rollup, Typescript ...

Create React Library had inflexible config, making it tricky to get my library transforming and bundling the Sass files correctly.

Compilation - SWC

Compilation works out of the box with SWC and does not require customization. Optionally, you can override the configuration. Here are the defaults:...

Migrating from Babel to SWC with React - Stack Overflow

js now supports SWC instead of Babel. The unit tests for React in our project are written with RITEway. The test command is:...

@nrwl/react:library | Nx

Create a React Library for an Nx workspace. ... Accepted values: babel , swc ... When true , the stylesheet is generated using...

Why you should use SWC (and not Babel) - LogRocket Blog

Since Rust decides which memory resources are no longer necessary at compile time and does not have to run continuously, processing time ...