Importing components from node_modules which use CSS is not working

[swernerx]

What version of Remix are you using?

1.3.2

Steps to Reproduce

1. Create a new Remix project
2. npm install uikit-test-using-css (project only created to demonstrate the issue)
3. Add import { Button } from "uikit-test-using-css" and use <Button/> in JSX

Expected Behavior

The imported CSS file is handled as an asset and added to the bundle dependencies. In this demonstration it does not even rely on CSS modules. It's just a plain asset which has to be copied/hashed to the output folder and loaded by the application.

Actual Behavior

It crashes with a parse error:

SyntaxError: Unexpected token '.'
iot-dashboard:dev:     at Object.compileFunction (node:vm:352:18)
iot-dashboard:dev:     at wrapSafe (node:internal/modules/cjs/loader:1032:15)
iot-dashboard:dev:     at Module._compile (node:internal/modules/cjs/loader:1067:27)
iot-dashboard:dev:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
iot-dashboard:dev:     at Module.load (node:internal/modules/cjs/loader:981:32)
iot-dashboard:dev:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
iot-dashboard:dev:     at Module.require (node:internal/modules/cjs/loader:1005:19)
iot-dashboard:dev:     at require (node:internal/modules/cjs/helpers:102:18)
iot-dashboard:dev:     at Object.<anonymous> (/Users/swerner/Workspace/azeti/iot-mono/node_modules/uikit-test-using-css/dist/index.cjs.js:7:1)
iot-dashboard:dev:     at Module._compile (node:internal/modules/cjs/loader:1103:14)
iot-dashboard:dev:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
iot-dashboard:dev:     at Module.load (node:internal/modules/cjs/loader:981:32)
iot-dashboard:dev:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
iot-dashboard:dev:     at Module.require (node:internal/modules/cjs/loader:1005:19)
iot-dashboard:dev:     at require (node:internal/modules/cjs/helpers:102:18)

While importing .css files works locally inside the actual application I am unable to import from our pre-made set of components which make use of CSS modules. Is there any chance to fix or to tweak the build system to take care?

[brynshanahan]

I'm also having this issue while trying to use React Spectrum

[brynshanahan]

#830 relevant discussion about React Spectrum + CSS issue

[devongovett]

I work on React Spectrum. I think Remix needs to add support for CSS imports within node_modules. Nothing fancy, the CSS just needs to end up on the page as a side effect (ala webpack style-loader, etc.), or end up bundled alongside the JS (like Parcel, or webpack with mini-css-extract-plugin, CRA, Gatsby, etc.). Next.js has a similar issue, and has an RFC open to solve it: vercel/next.js#27953. Currently you can manually configure Next.js to solve it, but not sure if something similar is possible with Remix. If so, we'd be happy to add something to our docs. Otherwise, I think there's nothing we can really do until Remix adds support for this. CSS imports in node_modules are a pretty common and widely supported way to distribute CSS with JS libraries, so I imagine we're not the only library affected by this.

[convcha]

I think the biggest blocker in adopting Remix is the styling issue.
Specifically, CSS Modules support and the issues of CSS frameworks like this one.
I don't know which issue the Remix team is currently working on, but if it is Storybook support (pinned in discussion), I think it is the wrong priority.

[chaukhoa97]

Any update on this?

[machour]

We have an ongoing discussion here about css modules: #4631

[markdalgleish]

This is now on our roadmap, I'm currently looking into it: #4817

[machour]

Implemented in Remix 1.11.0 🎉

[mayank1513]

I am still facing issue with this

[ophilbinbriscoe]

Remix 2.6.0 and still facing this issue.

[U-4-E-A]

Remix 2.6.0 and still facing this issue.

Did you find a solution for this? I am experiencing the same issue with v2.9.2.

[mayank1513]

Please checkout https://github.com/react18-tools/turborepo-template/. It might be what you are looking for.

[U-4-E-A]

Adding the following to vite.config.js fixed the problem for me: -

ssr: {
  noExternal: ['@myusername/package-name']
}