Skip to content

Adding CSS modules to route files causes HMR to crash with '[vite] Internal server error' #10011

Open
@U-4-E-A

Description

@U-4-E-A

Reproduction

https://github.com/U-4-E-A/remix-index-css-hmr-bug

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 4.79 GB / 15.73 GB
  Binaries:
    Node: 22.4.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @remix-run/dev: ^2.12.1 => 2.12.1
    @remix-run/node: ^2.12.1 => 2.12.1
    @remix-run/react: ^2.12.1 => 2.12.1
    @remix-run/serve: ^2.12.1 => 2.12.1
    vite: ^5.1.0 => 5.4.6

Used Package Manager

yarn

Expected Behavior

HMR should reload as expected.

Actual Behavior

HMR crashes due to CSS modules styling being applied directly to the elements in route files with the following error message: -

[vite] Internal server error: Unexpected token (1:0)
  Plugin: remix-route-exports
  File: foo/bar/remix-index-css-hmr-bug/app/routes/index.module.scss:1:0
  1  |  ._index_h0wte_1 {
     |  ^
  2  |    border: 2px solid blue;
  3  |    margin: 5px;
[...]

In the repo given, HMR works as expected if the styling is removed from the route file (in this case, _index.tsx)

Issue has been noted by another person here https://stackoverflow.com/questions/78747072/why-is-my-scss-module-file-is-removed-after-hmr-in-remix-application-after-chang.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions