#Vite adds @fs or @id to resolved module ID's???

1 messages · Page 1 of 1 (latest)

dusty tapir
#

Hello, everyone. Just a few minutes ago I had a troubleshooting session with one of my devs (a new one). "client-env is not loading (gives 404)", was the main issue. We clicked on devtools, Network, client-env. URL reads: http://localhost:4100/@id/client-env.js. "Well, why did you add that @id part to the URL ?", I asked arrogantly! LOL. Turns out, he didn't. Source code reads import env from "@project/client-env;. This @project/client-env is a bare specifier that goes through ID resolution as per Vite's pipeline.

We have a small plug-in in place with the resolveId hook with a simple if statement: If the id is @project/client-env, return public/client-env.js, because the actual JS file is in the public folder because we don't want it bundled, which brings me to: We have rollupOptions.build.externals set to a one-element array that excludes @project/client-env, but this shouldn't matter because when the project is built, everything is OK. This @id thing is only happening with npm run dev.

To summarize, I have no explanation to the matter. I could only suspect of Vite itself. We were using v5.0.11. So we started changing Vite's version. Version 5.0.5 had the same behavior, but then we moved to Vite v4, latest (I think it is v4.5.0). With Vite v4 inserts @fs instead of @id. But the weirdest thing is: It correctly serves the contents of public/client-env.js!!

So my question is twofold (+ 1):

  1. Why is this happening? Why is Vite adding stuff to the URL's?
  2. Why does it work even with a wrong url with @fs in it?
  3. Should I be doing something differently?

Thanks for your time.

dawn thunder
#

Vite adds the /@id because if you leave the @project/client-env as is when importing, it's an invalid URL identifier. So Vite adds an interim id, and should strip it off during the request so plugins shouldn't see it.

I don't quite understand the rest that's happening though. Maybe it's easier to use resolve.alias to map that import to another file?

dusty tapir
#

Hello. Thanks for dropping by. This is pretty confusing, indeed. For example: Why Vite v4 adds @fs but v5 @id? Why the URL returns the contents of the correct file in the public folder for Vite v4 despite adding @fs to the URL? Why my plug-in with the resolveId hook is not sufficient to get rid of the @id or @fs part? I guess I could play with resolve.alias, but my mind tells me that this shouldn't be needed, right?

dawn thunder
#

I don’t know why /@id or /@fs had changed. Your plugin shouldn’t also see that, unless you use enforce: ‘pre’ I think? It might be easier to understand the issue if you can share a small example

dusty tapir
#

This is @ work so I'll come back on Monday, most likely.