HMR not working with backend integration

[jvanmaaren]

Describe the bug

Hi all, I have a problem I hope you can help me with

During development any changes to Javascript doesn't update the DOM, although the server and console both report "[vite] hot updated: /App.tsx"

Reproduction

https://github.com/jvanmaaren/vite-update-problem

Steps to reproduce

Setup
I'm using a backend integration:
https://vitejs.dev/guide/backend-integration.html#backend-integration

Python is running on port 8000 and is including the dev environment
Vite is running on port 8080

To reproduce:

• Install packages: yarn
• View some-other-server/index.html on port 8000, for instance using: cd some-other-server && python3 -m http.server 8000
• Run the dev server: yarn dev
• View localhost:8000
• Now change the text in App.tsx

System Info

  System:
    OS: macOS 13.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 989.95 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Chrome Canary: 112.0.5574.0
    Edge: 109.0.1518.70
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @vitejs/plugin-react: 3.1.0 => 3.1.0
    vite: 4.1.1 => 4.1.1

Used Package Manager

yarn

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.
• 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.

[sapphi-red]

This App should be app because the file name is app.tsx.
https://github.com/jvanmaaren/vite-update-problem/blob/ea1888502b58df61513d0bff8d5eb38ccbc57704/src/index.tsx#L2

https://vitejs.dev/guide/troubleshooting.html#vite-detects-a-file-change-but-the-hmr-is-not-working

[jvanmaaren]

@sapphi-red thanks for your response. Somehow the filename was showing as capitalized on my file system.

To remove confusion, I've renamed the file to someapp.tsx

However the problem persists, can you re-open this issue?

[ArnaudBarre]

I think to Follow react convention, this file should be rename to App.tsx actually.

@jvanmaaren Can you tell me if you stil experiencing the issue when the file is App.tsx

[jvanmaaren]

Thanks for thinking along @ArnaudBarre, yes on my localmachine App.tsx doesn't work either

Example is updated to use

@vitejs/plugin-react: 3.1.0 
    vite: 4.1.1  

[ArnaudBarre]

I will take a look in the coming days (can't today)

[sapphi-red]

Ah, I was able to reproduce. It seems this is caused by duplicated @react-refresh.
index.html is importing http://localhost:8080/@react-refresh and the jsx files are importing http://localhost:8080/dev_static/@react-refresh.

vitejs/vite#5656 needs to be fixed to avoid these problems. (related: vitejs/vite#9700 (comment))

[ArnaudBarre]

Thanks for investigating!

So I think this cannot be fixed on the plugin side.

I think we should change the main doc (https://vitejs.dev/guide/backend-integration.html#backend-integration) to say to use
viteServer.transformIndexHtml(req.url, html) like here https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#middleware-mode

[sapphi-red]

@ArnaudBarre Would it be possible to detect this on the plugin side?

[ArnaudBarre]

I though so when we discussed it, but when we resolve/load the id, Vite as already removed the base prefix, so I don't see how to detect a missing base.

And I don't see how to detect if the runtime code was loaded twice because of two connected browser or because of this issue.

[sapphi-red]

When we were discussing I didn't have a concrete idea, but now I have one.
I guess we can detect this by changing __vite_plugin_react_preamble_installed__ to be in the runtime.

<script type="module">
  import RefreshRuntime from 'http://localhost:5173/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
-  window.__vite_plugin_react_preamble_installed__ = true
+  RefreshRuntime.__vite_plugin_react_preamble_installed__ = true
</script>

[ArnaudBarre]

Oh no let's keep it on the window and use it to detect that two runtimes are instantiate (and throw in that case)

[jvanmaaren]

Thanks for looking into this all ❤️ I'll try again once this is released

[ArnaudBarre]

This is only a warning for helping other people having the same issue as you. The real fix is adding the path prefix before @react-refresh in index.html (as found by @sapphi-red)

[jvanmaaren]

Oh now I understand, many thanks, it's working now

I've updated the example repo