CSS filenames with two file extensions are not proxied to the Vite dev server

[jrochkind]

This might be more of a general vite question -- does anyone have any good places to refer to me to ask general vite questions? Are there better options than Stack Overflow?

But, I'll try it here anyway...

I think import of a CSS file from a .JS file in vite oughta work, even though it's kind of not exactly Javascript?

Like:

import "~/some/path/to/file.css";

? I am finding that this works fine with vite build ("production"), but does NOT work with the vite dev server in development. With the vite dev server in development, I see in my browser console window:

GET http://localhost:3000/vite-dev/some/path/to/file.css net::ERR_ABORTED 404 (Not Found)

And not only is the CSS not loaded, but the JS file including the import statement is also not actually loaded.

Odd that it works with vite build but not with vite dev server? Is it meant to work, or is it just an accident that it works in production build?

Weirdly though, if the file ends in .scss instead (I do have sass in my package) -- it works fine, in both dev and production! Is this meant to work?

[jrochkind]

OK, I can't actually reproduce this in an ultra simple rails/vite app... but it's definitely happening in my app. I guess I need to figure out the minimal reproduction case, something is messing it up....

[jrochkind]

I'm getting really confused trying to create a reproduction; things seem to work and not when it's not clear to me what I changed.

I'm now, in my attempt at an isolated reproduction, sometimes instead getting a message in console:

crbug/1173575, non-JS module files deprecated.
(anonymous) @ VM10:6792

No idea what that's coming from or why. there isn't anything I know of trying to do anything with a js module file intentionally. Any thoughts welcome.

[jrochkind]

WOW. OK, that took me way too many hours to figure out.

It appears that when importing CSS from JS, vite (in dev server mode) really does not like an extra . in the name. I had a file named jquery.treetable.css.

# from a .js file
import '~/path/to/jquery.treetable.css'

Works fine when building for production vite build, but with vite dev server results in 404 errors in console. GET http://localhost:3000/vite-dev/path/to/jquery.treetable.css net::ERR_ABORTED 404 (Not Found)

Works fine as import '~/path/to/jquery-treetable.css'.

So this is probably a vite thing that has nothing to do with vite-ruby specifically?

It is a bug? Is it a documented thing, something I should have known better about? I don't know, but wow that was hard to track down.

[ElMassimo]

Hi Jonathan!

Vite Ruby needs to cope with Rails stylesheet_link_tag always adding a .css extension at the end of a file.

The alternative to the current implementation would be to use a regex that removes .css only if they are prefixed by known CSS preprocessor extensions (.sass.css), but that is also error-prone, as there could be corner cases where that's not intended (for example, you could have a jquery.less.css that is not a LESS file, currently works now, would break with the alternative).

Fortunately, Rails 7 added extname support, so it would make sense to stop replacing this in Rails 7 or higher. Out of curiosity, which Rails version are you using?

Created a pull request with a fix:

• fix: avoid removing double extension for non-preprocessor assets #301

[jrochkind]

Wow, so this issue was specific to vite-ruby! If I had to guess (without being very familiar with vite), i totally would have guessed it was vite and not vite-ruby specific, and I actually felt bad for posting it here! Although in retrospect -- I guess a problem like this wouldn't be undetected in main vite, it would effect too many people.

I guess it's good to have sympathy for people who post straight vite problems/questions here, since it can be hard to figure out for a newcomer!

It's actually not totally clear to me how the line of code you link to (thanks, I appreciate the link to source!) results in double extension breaking things for vite dev server -- I also don't totally follow the Rails behavior you are describing or how this works around it. Confusing stuff!

i am using Rails 6.1, probably will upgrade to Rails 7 in the next few months -- I chose to try migrating to vite (and getting rid of webpacker) before moving to Rails 7, seemed an easier path to me for some reason.

It looks like you found a workaround while still keeping things working in Rails previous to 7? That's great! This was a very confusing problem for me to debug -- it took me some hours to discover that the double extension was what triggered the problem. Since I am a newcomer that wasn't totally sure what things were supposed to work in the first place, at first I thought maybe I was doing something wrong (and didn't realize it was related to the double extension that happened to be in the file I was porting over to vite). And it was a very weird one, that on HMR could (I think) sometimes work and sometimes not, making it harder for me to narrow down.

Thanks for quick response!

[jrochkind]

I'm not sure if I'm following where the substitution happens, but... what if... if you do the .css substitution and find no file to serve, could you try again without the substitution and see if there's a file to serve? Would that be even more foolproof? Or added complexity not worth it?

[ElMassimo]

That would be a more robust solution, but after narrowing down the replacements to known preprocessor extensions, not sure it's worth the added complexity.

Thanks for reporting this!

[ElMassimo]

Upgrading to vite_ruby@3.2.11 should fix the problem of files such as jquery.tree.css not being proxied to the Vite dev server 😃

• fix: avoid removing double extension for non-preprocessor assets #301