qwik icon indicating copy to clipboard operation
qwik copied to clipboard

[🐞] Changing a module.css to a .css file requires a restart of the server

Open jmmon opened this issue 2 years ago • 1 comments

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

jmmon avatar May 08 '23 14:05 jmmon

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
    }
  }

PatrickJS avatar May 06 '24 08:05 PatrickJS

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.

gioboa avatar Jun 14 '24 14:06 gioboa