Dev server fails to load the scripts with 404 when using Vite base option and virtual modules

[renataogarcia]

Describe the bug

After upgrading to 5, vite-plugin-virtual-mpa Dev server fails to load the scripts with 404 when using Vite base option.

The plugin generates virtual modules, and due #5657 it now failing as reported here in more detail.

Essentially it fails because virtual modules start with '/@id/x00/<base>' instead of '<base>' as #5657 now requires.

Should the middleware also handle the virtual modules here?

Reproduction

https://stackblitz.com/edit/vitejs-vite-zr5nzg?file=.vscode%2Fsettings.json

Steps to reproduce

Once the project starts:

• navigate to '/my-base/my-virtual.html'
• Check the console and you should see the 404 for the following asset '.../@id/x00/my-base/my-virtual.html?html-proxy&index=0.js´

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.1.0 => 5.1.1 
    vite-plugin-virtual-mpa@1.10.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-zr5nzg (Open reproduction)

[sapphi-red]

Vite responding /@id/__x00__/my-base/my-virtual.html?html-proxy&index=0.js with 404 is an expected behavior. Because the base is set to /my-base/, Vite will respond with 404 outside that path.
https://vitejs.dev/guide/migration.html#advanced:~:text=%5B%235657%5D%20fix%3A%20return,with%20404%20instead

I guess instead of /@id/__x00__/my-base/my-virtual.html?html-proxy&index=0.js, the plugin should be injecting /my-base/@id/__x00__/my-base/my-virtual.html?html-proxy&index=0.js.

[renataogarcia]

@sapphi-red, I think one option is to handle this in the plugin; this was my initial approach to solving this, and I got it working this way.

However, I was wondering, since:

• The URL /@id/__x00__/my-base/my-virtual.html?html-proxy&index=0.js is being injected by Vite via transformIndexHtml here,
• This problem only happens with the Dev Server, whereas the build output works fine,
• My understanding is that this issue is not specific to this plugin. Every plugin that generates virtual modules would have this issue,
• The base is already included in the URL generated by Vite's transformIndexHtml, so prepending it seems like a workaround for fix!: return 404 for resources requests outside the base path #5657,

Perhaps, instead of overriding in the plugin, it would make sense to handle this in the DevServer's base.ts as part of the change introduced by #5657, to cater to virtual modules? LMKYT

PS: I've edited the description to refer to #5657. This was the actual change I meant to refer to but I linked it to wrong number.

[XiSenao]

I think whether we can consider adding the base segment here.

vite/packages/vite/src/node/server/middlewares/indexHtml.ts

Line 201 in 296ce24

proxyModuleUrl = wrapId(proxyModulePath)

[sapphi-red]

I see.

@XiSenao I think that makes sense. Would you create a PR?

[XiSenao]

@XiSenao I think that makes sense. Would you create a PR?

Of course. However, before that, @renataogarcia has already tried to explore this issue. Are you willing to solve this issue? @renataogarcia

[renataogarcia]

@XiSenao Yep, I'm happy to have look and create a PR.