Open
Description
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.