[Bug]: @Carbon/react not working properly with latest Remix version

[fahadahmed]

Package

@carbon/react

Browser

Chrome

Package version

v1.44.0

React version

18.2.0

Description

Cannot use @carbon/react package within a remix app after setting up sass. We get a message for unable to find a stylesheet to import.

Reproduction/example

https://stackblitz.com/~/github.com/fahadahmed/fhdamd-1-remix-dynamic-form

Steps to reproduce

• Create a new repository for remix using the command pnpm create remix <repository-name>
• add and configure sass
• add @carbon/react to the project
• create a new styles/ globals.scss file and setup the file to use the styles from @carbon via use '@carbon/react'

the dev command to generate css files for sass styles for carbon will fail.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[fahadahmed]

Here is an example setup that does work but that is for an older version of remix and @carbon/react. https://stackblitz.com/edit/remix-carbon?file=app%2Froot.tsx

Based on the issue above, it seems that I need to install @carbon/grid npm package which technically I shouldn't need to if I am installing @carbon/react as a whole.

[tay1orjones]

Hey, thanks for reporting this. Updating the working stackblitz to the latest version of @carbon/react shows it still working. https://stackblitz.com/edit/remix-carbon-a8jujb?file=package.json

The initial/broken repro you linked doesn't have a .scss in it. Could you provide a broken reproduction of the issue? You're correct you shouldn't need to install @carbon/grid to use styles in @carbon/react. It includes all the necessary dependencies.

[fahadahmed]

Hey @tay1orjones ,

thanks for looking into this. This is what I am getting when I am trying to run the sass command to generate the styles and trying to import the @carbon/react package within the global.scss file.

The sandbox is here: https://stackblitz.com/~/github.com/fahadahmed/fhdamd-1-remix-dynamic-form

[tay1orjones]

@fahadahmed I think you're running into this issue: sass/dart-sass#1765, specifically sass/dart-sass#1765 (comment)

pnpm symlinks dependencies, so the --load-path you have defined in your example doesn't contain the source for the files sass is looking for/needing, like @carbon/grid. Based on the comment I linked above, adding another --load-path could solve it.

 --load-path=node_modules --load-path=node_modules/.pnpm/@carbon+grid@11.21.0/node_modules

You might need a load path entry for each package used by @carbon/react that loads sass styling.

[tay1orjones]

I think public-hoist-pattern could also be used to avoid the issue altogether. Would be something like public-hoist-pattern[]=*@carbon* I think. That should put these dependencies in node_modules so the single --load-path=node_modules would work.

Try it out and let us know how it goes, this would be a good thing to document if we can validate this fixes your issue.

[anneyxa]

Do you know if there's any workaround for this if I'm using sass package with Rollup? I have the exact same error message. Also cannot move to Carbon 11 because of this, and sass is really reluctant to fix this problem..: webpack-contrib/sass-loader#804 (comment)

In my scss file, I'm doing simply @use '@carbon/react'; .
I can see this error when doing @use '@carbon/react/scss/type' as *; as a replacement as well.
The error doesn't occur with @use '@carbon/react/scss/spacing' as *;.

Sorry but I'm not using command line to load sass styles, so I don't quite understand how to apply your above suggestions in Rollup config. I.e. using 'rollup-plugin-scss' or 'rollup-plugin-sass'.

// FYI I'm using following configs:

import scss from 'rollup-plugin-scss'
...

export default {
  ...
  plugins: [
    ...
    scss({
      includePaths: ['node_modules'],
      fileName: 'some_output_css_file.css'
    }),
    ...
    })
  ],

(It was working in Carbon v10 - even though I didn't have "includePaths: ['node_modules']" back then)

[anneyxa]

Okay I've updated all my packages in package.json (npm outdated and npm update command) - and it seems to be working right now (with same Rollup config as above). So - I guess nevermind. ;)

// For future folks reading this, you may also check if you have any other carbon package installed, like @carbon/themes. If so, you can uninstall it. Then, uninstall @carbon/react and install it again. It helped me with one similar error as well.