TypeError: Module name, '@id/__x00__virtual:remix/inject-hmr-runtime' does not resolve to a valid URL.

[micksabox]

Reproduction

My code is open source here, issue is reproducible in the refactor/vite branch. Clone the repository, run npm install and then click on Launch Tracker. https://github.com/micksabox/cognactive/tree/refactor/vite

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 608.72 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.0.0/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.69
    Safari: 17.3.1
  npmPackages:
    @remix-run/dev: ^2.7.2 => 2.7.2 
    @remix-run/node: ^2.8.0 => 2.8.0 
    @remix-run/react: ^2.8.0 => 2.8.0 
    @remix-run/serve: ^2.8.0 => 2.8.0 
    vite: ^5.1.0 => 5.1.4

Used Package Manager

npm

Expected Behavior

Remix routes should be navigable.

Actual Behavior

The home page loads, but the following error is logged to the console TypeError: Module name, '@id/__x00__virtual:remix/inject-hmr-runtime' does not resolve to a valid URL.

When attempting to navigate to another route /tracker, a white page is instead shown.

[micksabox]

Posting a video here to demonstrate the problem. Was really excited to transition my Remix app to Vite but this has blocked me.

https://github.com/remix-run/remix/assets/2997810/b691ed91-7c49-4ff6-a579-e05aec56193d

[micksabox]

Still experiencing the issue with latest packages released. npmPackages: @remix-run/dev: 2.8.1 @remix-run/node: 2.8.1 @remix-run/react: 2.8.1 @remix-run/serve: 2.8.1 vite: 5.1.5

same issue with above versions. Any help is appreciated. I would like to internationalize my app but want to transition first to Vite.

[micksabox]

I'm wondering is this even a Remix issue or a Vite issue?

[vixalien]

I'm having this issue too, and I'm not sure what caused it/ @micksabox did you get around it?

[micksabox]

@vixalien I've never got around it, my app is still stuck without being able to upgrade to Vite unfortunately

[vixalien]

ah, that sucks. I'm sorry.

[vixalien]

So I was debugging this a bit, and found that the line is from here

https://github.com/remix-run/remix/blob/ede2012949a784722d8989124dff5a34ae90c008/packages/remix-react/components.tsx#L915

Tracking out where manifest.hmr.runtime is defined, it's at:

https://github.com/remix-run/remix/blob/ede2012949a784722d8989124dff5a34ae90c008/packages/remix-dev/vite/plugin.ts#L985

So I think the bug is caused by remix using VirtualModule.url(injectHmrRuntimeId) instead of just using injectHmrRuntimeId because it seems to work otherwise.

[vixalien]

Hehe nevermind. I think I found the issue, it's related to having base: "./" in your vite manifest. I removed it and things started working correctly. @micksabox can you try it and let me know.

[micksabox]

Oh that's what it was! Thanks @vixalien

[micksabox]

Closing as the issue is resolved