Importing CSS from node_modules no longer works

[ahallicks]

Reproduction

I've been testing this with Mantine and used their starter with upgraded dependencies:

https://github.com/ahallicks/remix-template

Clone this, npm i and then npm run dev and when you load the page you'll see messages in the console like:

Could not load remix-template/node_modules/@mantine/core/styles.css

and no styles load.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 18.56 GB / 47.70 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - ~\AppData\Roaming\npm\npm.CMD
    bun: 1.1.30 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (130.0.2849.68)

Used Package Manager

npm

Expected Behavior

These imported styles should be automatically bundled and loaded on the front end.

Note that I have also tried importing them as paths and using the LinksFunction but this still doesn't work.

Actual Behavior

Any styles imported this way do not load as Remix can't find them:

Could not load remix-template/node_modules/@mantine/core/styles.css

For the example repo this means that almost no styles load at all.

[sapphi-red]

Remix does not support Vite 6 yet, so probably downgrading Vite to v5 would solve your issue.
I made two PRs that fixes the incompatibilities last week (#10254, #10255), hoping to get them merged. 🫡

[ahallicks]

Remix does not support Vite 6 yet, so probably downgrading Vite to v5 would solve your issue. I made two PRs that fixes the incompatibilities last week (#10254, #10255), hoping to get them merged. 🫡

Thank you! This fixed it. Not sure how I missed that Vite had sneakily upgraded to 6.

[hanhwa12]

Same issue. For me all css files like tailwind, fontsource are not working. I came across your question and the answers. At least I found a workable solution. Thanks.

[trevor-trou]

Same issue. Downgrading vite to v5 fixed it for me. Thank you!