Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Importing components from node_modules which use CSS is not working #2469

Closed
swernerx opened this issue Mar 23, 2022 · 13 comments
Closed

Importing components from node_modules which use CSS is not working #2469

swernerx opened this issue Mar 23, 2022 · 13 comments
Labels
bug:unverified

Comments

@swernerx
Copy link

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
Copy link

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

@brynshanahan
Copy link

#830 relevant discussion about React Spectrum + CSS issue

@devongovett
Copy link
Contributor

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.

@jaywcjlove jaywcjlove mentioned this issue Aug 30, 2022
Closed
@convcha
Copy link

convcha commented Oct 3, 2022 •
edited
Loading

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
Copy link
Contributor

Any update on this?

@machour
Copy link
Collaborator

machour commented Nov 24, 2022 •
edited
Loading

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

@markdalgleish
Copy link
Member

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

@markdalgleish markdalgleish mentioned this issue Dec 20, 2022
Merged
2 tasks
@machour
Copy link
Collaborator

machour commented Jan 22, 2023

Implemented in Remix 1.11.0 🎉

@machour machour closed this as completed Jan 22, 2023
@mayank1513
Copy link

I am still facing issue with this

@ophilbinbriscoe
Copy link

Remix 2.6.0 and still facing this issue.

@U-4-E-A
Copy link

U-4-E-A commented Jun 11, 2024

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
Copy link

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

@U-4-E-A
Copy link

U-4-E-A commented Jun 11, 2024

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug:unverified
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@devongovett @swernerx @machour @markdalgleish @convcha @ophilbinbriscoe @mayank1513 @U-4-E-A @brynshanahan @chaukhoa97