Issue with @nx/rspack 18.3.0 not able to load scss module

[sdasswift]

Current Behavior

Getting the error - module_scss__WEBPACK_IMPORTED_MODULE_1__.default is undefined

When trying to import scss module

Expected Behavior

Should be able to import scss module. Downgraded to 18.0.6 and it works fine!

GitHub Repo

No response

Steps to Reproduce

Nx Report

nx (global)        : 18.2.2
nx                 : 18.3.3
@nx/js             : 18.3.3
@nx/jest           : 18.3.3
@nx/linter         : 18.3.3
@nx/eslint         : 18.3.3
@nx/workspace      : 18.3.3
@nx/devkit         : 18.3.3
@nx/eslint-plugin  : 18.3.3
@nx/react          : 18.3.3
@nrwl/tao          : 18.3.3
@nx/web            : 18.3.3
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
Community plugins:
@nx/rspack : 18.3.0

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[pikilon]

I can confirm this is happening also for css modules .module.css in version

• 18.3.7
• 19.0.0
• 19.1.0

[pikilon]

@sdasswift did you found any workaround to make it work?
My nx report

Node   : 22.2.0
OS     : linux-x64
yarn   : 1.22.22

nx                 : 18.3.4
@nx/js             : 18.3.4
@nx/jest           : 18.3.4
@nx/linter         : 18.3.4
@nx/eslint         : 18.3.4
@nx/workspace      : 18.3.4
@nx/cypress        : 18.3.4
@nx/devkit         : 18.3.4
@nx/esbuild        : 18.3.4
@nx/eslint-plugin  : 18.3.4
@nx/node           : 18.3.4
@nx/react          : 18.3.4
@nx/storybook      : 18.3.4
@nrwl/tao          : 18.3.4
@nx/web            : 18.3.4
@nx/webpack        : 18.3.4
typescript         : 5.4.5
---------------------------------------
Community plugins:
@nx/rspack             : 18.0.6
@simondotm/nx-firebase : 2.3.0
nx-stylelint           : 15.0.0

[sdasswift]

Using "@nx/rspack": "18.0.6" for now which doesn't have the issue. We are using Sass btw. Not CSS.

[pikilon]

Using "@nx/rspack": "18.0.6" for now which doesn't have the issue. We are using Sass btw. Not CSS.

I gave up, switching to vite with swc, and I could even update to nx v19.1.1

[FranciscoKloganB]

Bump. Any news regarding this issue? Not being able to load scss and css is very sad.

[sdasswift]

@FranciscoKloganB You can load scss for a specific version of @nx/rspack which is 18.0.6 and you'll need to install sass as well. That's how we are working right now but we can't upgrade.

@AgentEnder Can any one from your team please look into this, since you guys are upgrading @nx/rspack in every release?

[FranciscoKloganB]

@sdasswift I understand that, but I really don't want to be on 18.0.6. My entire Nx workspace is recent and is using latest in all other packages. I see no reason to time-travel back so many versions.

[FranciscoKloganB]

Investigation

I believe the problem is here; This way of parsing scss and sass is not inline with current RSPack documentation here;

Solution

Using latest non-alpha version of rspack and latest @nx/rspack the following edits on rspack.config.js suffices to use CSS, SASS and SCSS modules. Simply update rspack.config.json with something like below

function withCustomFactory(config) {
   const customConfig = {
    ...config,
    module: {
      ...config.module,
      parser: {
        ...config.parser,
        /**
         * Enable css module default imports by setting namedExports to false (e.g., import styles from './App.module.scss').
         *
         * When namedExports is true you must:
         *
         * Use namespaced depending on your tsconfig settings (e.g., import * as styles from './App.module.scss')
         * Use named imports (e.g., import { container, header, text } from './App.module.scss') 
         *
         * @see https://www.rspack.dev/guide/tech/css#css-modules
         */
        'css/auto': {
          namedExports: false,
        },
      },
      rules: [
        ...config.module.rules,
        // 👇 Enable `*.module.css` (they don't work too with current @nx/rspack setup)
        {
          test: /\.css$/,
          type: 'css/auto'
        },
        // 👇 Enable  `*.module.sass` and `*.module.scss`
        {
          test: /\.(sass|scss)$/,
          use: [
            {
              loader: 'sass-loader',
              options: {
                api: 'modern-compiler', // `modern-compiler` and `sass-embedded` improves build performance
                implementation: require.resolve('sass-embedded'),
              },
            },
          ],
          type: 'css/auto', // 'css/auto' to support '*.module.(scss|sass)' as CSS Module
        },
      ],
    },
  }

  return customConfig
}

module.exports = composePlugins(withNx(), withReact(), withCustomFactory)

@jaysoo after looking at @nx/rspack withWeb and withReact utilities, particularly the withWeb version I would personally consider making more, smaller, composable plugins instead of a big "withWeb" that does everything. For example. withReact would still invoke withWeb (which could be renamed to withHtml) and then you'd add a withStyles; In turn withStyles can compose multiple smaller plugins such as withCss, withScss, withTailwind. This would facilitate redundant code and makes it less risky for consumers to replace certain pieces temporarely when bugs are found and not prioritized. An example usage would be

module.exports = composePlugins(
  withNx(),
  withReact(),
  withHtml(),
  withStyles(), // 👈 opt-in to all defaults
)

or

module.exports = composePlugins(
  withNx(),
  withReact(),
  withHtml(),
  withScss(), // 👈 opt-in to `Scss` and easier to send opts into it
)

or

module.exports = composePlugins(
  withNx(),
  withReact(),
  withHtml(),
  withCustomFactory, // 👈 I bring my own style options
)