[🐞] Changing a module.css to a .css file requires a restart of the server
Which component is affected?
Qwik Rollup / Vite plugin
Describe the bug
I'm changing a module.css file into a regular css file. Take the Counter component in the starter, for example.
I change the couter.tsx from importing the counter.module.css file to now importing counter.css, and I change the class from {styles['counter-wrapper']} to "counter-wrapper". I then rename counter.module.css to counter.css.
Expected nothing to change, since I basically just renamed a file and the import, so the styles should match.
Actually, I get this error on the server:
7:04:03 AM [vite] Internal server error: Failed to load url ./counter.module.css (resolved id: ./counter.module.css) in /home/projects/qwik-starter-z9kjwp/src/components/starter/counter/counter.tsx. Does the file exist?
at loadAndTransform (file://file:///home/projects/qwik-starter-z9kjwp/node_modules/vite/dist/node/chunks/dep-a178814b.js:53377:21)
Once I rs the server, it fixes the error and it loads properly.
Seems like the "server's version" of the component does NOT update on file-save to reflect the import change (when switching from .module.css to .css). For some reason it still tries to serve up the "old" version of the component, which has an import to a now nonexisting counter.module.css, instead of properly updating to be looking for the correct import counter.css.
Reproduction
https://stackblitz.com/edit/qwik-starter-z9kjwp?file=src/components/starter/counter/counter.tsx
Steps to reproduce
No response
System Info
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 4.07 GB / 15.85 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 3.5.0 - C:\Program Files\nodejs\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.35)
Internet Explorer: 11.0.19041.1566
Additional Information
No response
you can tell vite to watch .module.css files
server: {
watch: {
// During dev, 'node_modules/.vite' is written to by Vite.
include: ['src/**/*.module.css'] // watches only the specific *.module.css files
}
}
Thanks @PatrickJS for your help. So I'm closing this issue for now, feel free to re-open it if it's still an issue for you.