Css modules not applying in dev mode after editing #9751

Denny966 · 2024-07-14T20:43:42Z

Denny966
Jul 14, 2024

I'm new to remix and I'm trying to get css modules working, it looks like the css is removed from the html after a hot reload

I seem to have a pretty basic setup for my application and at the initial load the CSS is being applied but for some reason when I edit my component the text turns back to black, what is happening?

package.json

{
  "dependencies": {
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@remix-run/serve": "^2.9.2",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "sass": "^1.77.2",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}

_index.tsx

import classes from "../styles/global.module.scss";

export default function Index() {
  return <h1 className={classes["test"]}>Welcome to Remix</h1>;
}

global.module.scss

.test {
  color: #d90000;
}

root.tsx

import type { LinksFunction } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import globalStyles from "~/styles/global.module.scss?url";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

vite.config.json

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

Here's a sandbox:
https://codesandbox.io/p/devbox/sad-turing-4vlsm7

Example gif

janukkeb · 2024-07-21T19:29:37Z

janukkeb
Jul 21, 2024

@Denny966 did you solve an issue somehow?

1 reply

Denny966 Jul 21, 2024
Author

@Denny966 did you solve an issue somehow?

Not really, however updating to react 18.3.0 seems to work better

ChyzhovViacheslav · 2024-07-24T17:42:19Z

ChyzhovViacheslav
Jul 24, 2024

Same thing, any ideas on how to fix this? React 18.3.0 doesn't bring any changes

1 reply

Denny966 Jul 24, 2024
Author

I asked on Discord but didn't find a solution for it

If I had to guess, I’d say either your stylesheet is recompiling with new randomly generated class names and your component on the page is still using the old ones, or the opposite where the component updates to new class names but your page is still loading the old style
I don’t know off hand how to fix it though, I haven’t used css modules with remix

Might be related https://remix.run/docs/en/main/guides/css-files#bundled-css-can-disappear-in-development

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Css modules not applying in dev mode after editing #9751

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Css modules not applying in dev mode after editing #9751

Uh oh!

Denny966 Jul 14, 2024

Replies: 2 comments · 2 replies

Uh oh!

janukkeb Jul 21, 2024

Uh oh!

Denny966 Jul 21, 2024 Author

Uh oh!

ChyzhovViacheslav Jul 24, 2024

Uh oh!

Denny966 Jul 24, 2024 Author

Denny966
Jul 14, 2024

Replies: 2 comments 2 replies

janukkeb
Jul 21, 2024

Denny966 Jul 21, 2024
Author

ChyzhovViacheslav
Jul 24, 2024

Denny966 Jul 24, 2024
Author