Vite: Build fails to serve css-modules files properly #7941

mikkpokk · 2023-11-08T14:18:01Z

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

Yes

Steps to Reproduce

Create a clean project

npx create-remix@latest --template remix-run/remix/templates/unstable-vite

Create a Test component with css-modules:

app/component/Test/index.tsx

import style from './Test.module.css'

const Test = () => {
    return (
        <div className={style.Test}>
            Test style
        </div>
    )
}

export default Test

app/component/Test/Test.module.css

.Test {
    background: #ff9100;
    color: #fff;
}

Create new route file

app/routes/test.tsx

import type { MetaFunction } from "@remix-run/node";
import Test from '~/component/Test'
import {Link} from '@remix-run/react'

export const meta: MetaFunction = () => {
    return [
        { title: "Test page" },
    ];
};

export default function Index() {
    return (
        <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
            <h1>Welcome to Remix</h1>
            <ul>
                <li>
                    <Link to={'/'}>
                        Index
                    </Link>
                </li>
            </ul>
            <Test/>
        </div>
    );
}

Use Test component on index route & apply Link to /test route

_app/routes/index.tsx

import type { MetaFunction } from "@remix-run/node";
import Test from '~/component/Test'
import {Link} from '@remix-run/react'

export const meta: MetaFunction = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <Link to={'/test'}>
            Test
          </Link>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
      <Test/>
    </div>
  );
}

Run npm run build && npm run start

Expected Behavior

Test component should have orange background and white font color on routes / and /test. There should be have 1 css file on inside <head> tag.

Actual Behavior

Test component don't have styles, component have it's class on DOM but css file missing from <head> tag.

The text was updated successfully, but these errors were encountered:

markdalgleish · 2023-11-09T22:55:41Z

Thanks for raising this issue!

Fixed by #7952. This will be available in the next nightly release if you want to try it before it goes out.

mikkpokk added the bug:unverified label Nov 8, 2023

brophdawg11 added the vite label Nov 8, 2023

hi-ogawa mentioned this issue Nov 9, 2023

fix(remix-dev/vite): attach CSS from shared chunks to routes #7952

Merged

2 tasks

markdalgleish closed this as completed Nov 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite: Build fails to serve css-modules files properly #7941

Vite: Build fails to serve css-modules files properly #7941

mikkpokk commented Nov 8, 2023 •

edited

Loading

markdalgleish commented Nov 9, 2023 •

edited

Loading

Vite: Build fails to serve css-modules files properly #7941

Vite: Build fails to serve css-modules files properly #7941

Comments

mikkpokk commented Nov 8, 2023 • edited Loading

What version of Remix are you using?

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

Expected Behavior

Actual Behavior

markdalgleish commented Nov 9, 2023 • edited Loading

mikkpokk commented Nov 8, 2023 •

edited

Loading

markdalgleish commented Nov 9, 2023 •

edited

Loading