CSS module issue after upgrading to Remix v1.16.0

[IDrissAitHafid]

Hey everyone,

I wanted to let you know about a CSS module issue. After upgrading from Remix v1.8.2 to v1.16.0, I encountered a problem. In one file, I import a CSS module into links, which works fine during development but fails during the build.

Previously, this code worked on v1.8.2 in both dev and prod. However, on v1.16.0, it only works in dev mode.

import styles from "~/styles.module.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

I discovered that in the production build, it appends <link rel="stylesheet" href="[object Object]">. To resolve this, I directly linked the CSS module I'm importing by changing the code to:

import styles from "~/styles.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

It would be great if this issue is mentioned in the documentation, allowing developers to be aware of it before upgrading.

[arielvieira]

Have you set up CSS bundling? https://remix.run/docs/en/main/guides/styling#css-bundling. The CSS Modules styles should be injected into the generated CSS bundle.

[IDrissAitHafid]

I'm actually using CSS module on one file! I removed it and used regular css file and it is working correctly now!

I didn't knew about css bundling, thanks for sharing!