Open jalik opened 11 months ago
I'd say this is expected. If /images
is proxied to the backend, how would Vite know the path of /images/img.png
at build time? The backend might be serving the file from S3 or GCS, and in that case the path won't exist.
@sapphi-red My first explanation was not clear enough, sorry, I've updated the description and this post.
There are two folders named "images" (it's just a coincidence), one is used for static assets (runtime), the other one is used by import
, so Vite handles imported files as assets and put them in the output dir.
The final bundle works as expected, files from the static "images" folder are served normally, while assets generated by Vite are served also, but not from the original folder, since Vite copy and rename them in the output dir.
The issue happens during development (with vite dev
), you should check the repo I've created (as required in the issue guideline) to better understand what I am talking about.
What I think is that, based on the proxy rules:
/images/img.png
without the ?import
, it should proxy the request as defined in the config, that would happens only if I put an <img src="/images/img.png" />
tag inside a component or index.html.import img from './images/img.png'
, it proceeds to load the file using the ?import
which I find normal, so the request should not be proxiedI don't know how Vite works under the hood, but that seems to be the expected behavior.
@jalik I think your reproduction is private. It returns 404.
@jalik I think your reproduction is private. It returns 404.
Sorry, I made the repository public.
All the files in the repro are empty. (e.g. https://github.com/jalik/vite-proxy-bug/blob/main/vite.config.js )
Hello @jalik. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction
will be closed if they have no activity within 3 days.
All the files in the repro are empty. (e.g. https://github.com/jalik/vite-proxy-bug/blob/main/vite.config.js )
My apologies for this, I don't know what happened but I just did commit and pushed all files to the repository then clone back, it's ok now. Sorry again, first time it happens to me.
Describe the bug
Let say my
index.js
imports an asset from an "images" folder:And that I have declared a
server.proxy
option that points to a static folder also named "images" (so there are two folders named "images", one for assets to import, one for static assets):When the app loads (in dev mode), the asset file is loading like
GET /images/img.png?import
, but because I've declared/images
to be proxied to my backend, even with the?import
marker the request fails.I suppose that the
?import
is not taken into account, as it should, since the import should be prioritized if matching the request, no ?Reproduction
https://github.com/jalik/vite-proxy-bug
Steps to reproduce
Do
npm run dev
Donpm run build
andnpm run start
for the serverGo to http://localhost:3000, and see that only one icon loads. Go to http://localhost:8080, and see that both icons load.
System Info
Used Package Manager
npm
Logs
No response
Validations