Backend Integration multiple child component hmr failed (PHP)

SouthLink commented 2 years ago

Describe the bug

The hmr failure was encountered in the back-end(PHP) integrated multi-page mode. everything worked fine when a single component was introduced

The latest update..

Details please refer to the smallest copy, when I use to start the project with http://localhost:3009/dist/index.html access, HMR is normal,By introducing father http://localhost:3009/dist/index.php PHP file parent components can do normal HMR, child components HMR fails

I think it's because PHP files don't support refreshing

Because my current project is very old, PHP version 5.6, and does not use the Laravel framework

What should I do to use hot update mode normally

Reproduction

minimal reproducible example

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 3.76 GB / 15.80 GB
  Binaries:
    Node: 16.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 102.0.5005.115
    Edge: Spartan (44.18362.1533.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-basic-ssl: ^0.1.1 => 0.1.1
    @vitejs/plugin-react: ^2.0.1 => 2.0.1
    vite: ^3.0.6 => 3.0.6

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.

github-actions[bot] commented 2 years ago

Hello @SouthLink. 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.

SouthLink commented 2 years ago

I update a Vite plugin to solve this problem vite-plugin-backend-hmr

sapphi-red commented 2 years ago

That is one of the intended ways to make HMR work with backend integration. Vite does not/cannot know which files are used so a plugin is needed to handle by Vite.

SouthLink commented 2 years ago

这是使 HMR 与后端集成一起工作的预期方法之一。 Vite 不知道/不能知道使用了哪些文件，因此 Vite 需要一个插件来处理。

I found that HMR in the HTML file is success, but HMR in the PHP file fails. After searching, I found that in the deep level introduction, vite hmr only updates the current file and does not update to the top parent component, so the hot update fails. So I used the module importers the file to find the top-level component update. Isthat right please?

sapphi-red commented 2 years ago

Ah, I understand what you were saying about.

This was because you were importing http://localhost:3009/@react-refresh in index.php.

import RefreshRuntime from 'http://localhost:3009/@react-refresh'

This should be importing http://localhost:3009/dist/@react-refresh. (index.html has this, so it's working.)

Related issue: #5656

vitejs / vite