Import asset fails to load when path matches `server.proxy`

jalik commented 11 months ago

Describe the bug

Let say my index.js imports an asset from an "images" folder:

import img from "./images/img.png"

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):

const backendUrl = 'http://127.0.0.1'

export default defineConfig(() => ({
  build: {
    outDir: '../main/resources/public'
  },
  root: 'src/web',
  server: {
    proxy: {
      '/api': backendUrl,
      '/images': backendUrl
    }
  }
}))

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 Do npm run build and npm run start for the server

Go to http://localhost:3000, and see that only one icon loads. Go to http://localhost:8080, and see that both icons load.

System Info

System:
    OS: Linux 6.2 KDE neon 5.27 5.27
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 13.08 GB / 31.27 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.159

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 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.

jalik commented 11 months ago

@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:

if Vite receives a request to /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.
however if during build time, Vite detects the 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 proxied

I don't know how Vite works under the hood, but that seems to be the expected behavior.

sapphi-red commented 11 months ago

@jalik I think your reproduction is private. It returns 404.

jalik commented 11 months ago

@jalik I think your reproduction is private. It returns 404.

Sorry, I made the repository public.

sapphi-red commented 11 months ago

All the files in the repro are empty. (e.g. https://github.com/jalik/vite-proxy-bug/blob/main/vite.config.js )

github-actions[bot] commented 11 months ago

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.

jalik commented 11 months ago

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.

eBitzu commented 6 months ago

Have the same issue: https://stackblitz.com/edit/vitejs-vite-fzmsdn?file=vite.config.ts,index.html&terminal=dev

vitejs / vite