热更新失效

[ningbnii]

Describe the bug

在index.vue中import testClass，这时候修改testClass，可以输出console。但是修改index.vue后，再次修改testClass，就不会输出console了

Reproduction

https://github.com/ningbnii/vite2_vue3_hmr_test

System Info

  System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 3.44 GB / 15.95 GB
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Internet Explorer: 11.0.17763.2145
  npmPackages:
    @vitejs/plugin-vue: ^2.0.1 => 2.0.1
    vite: ^2.7.10 => 2.7.10

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. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next 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.

[poyoho]

would you need to rerun script when modifying template and style? 🤔

and modify script will hmr

[laola2013]

遇到typeError错误时，即使修复问题后，页面也是无法进行热更新，必须手动重新加载页面，之后的热更才是正常的

[poyoho]

I guess vite call vue runtime interface to rerender the components, but got a error will destroy the component, so we can't rerender only reload 😂

[laola2013]

I guess vite call vue runtime interface to rerender the components, but got a error will destroy the component, so we can't rerender only reload 😂

应该是这样的，其实对于js文件而言，不存在这个问题，因为vite对于.js和.vue 采用了不同的更新方式，前者用的是page reload，而后者采用的是hmr update。
目前我的解决方式是：对于.vue的文件添加了额外的文件监听器，更新时直接page reload，这样做比较难受的点是开发体验上稍微差了一点。

[ningbnii]

would you need to rerun script when modifying template and style? 🤔

and modify script will hmr

修改.vue文件后，再修改.js文件，就不会热更新了，重新启动一下项目，再更改.js文件，就又可以热更新了

[laola2013]

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 3.44 GB / 15.95 GB

would you need to rerun script when modifying template and style? 🤔
and modify script will hmr

修改.vue文件后，再修改.js文件，就不会热更新了，重新启动一下项目，再更改.js文件，就又可以热更新了

可能因为我是macOS，也有可能是因为我用的是@vitejs/plugin-vue@1.10.2，所以没有出现你说的这种情况，vite内部在采用的是chokidar的文件系统监听器，在不同系统之间的表现可能存在差异（bug），之后再看一下，有没有更好的处理方式

[ningbnii]

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 3.44 GB / 15.95 GB

would you need to rerun script when modifying template and style? 🤔
and modify script will hmr

修改.vue文件后，再修改.js文件，就不会热更新了，重新启动一下项目，再更改.js文件，就又可以热更新了

可能因为我是macOS，也有可能是因为我用的是@vitejs/plugin-vue@1.10.2，所以没有出现你说的这种情况，vite内部在采用的是chokidar的文件系统监听器，在不同系统之间的表现可能存在差异（bug），之后再看一下，有没有更好的处理方式

我测试了macOS，使用了@vitejs/plugin-vue@1.10.2，问题依然存在，我截图说明了一下测试流程
1、yarn dev

2、修改index.vue

3、修改testClass.js

[poyoho]

Vite splits .vue into two files: .css / .js link

CSS error report only needs to re-insert the head node.

But the js error will cause the internal execution error of vue, because the template+script regenerated by vite will be updated and executed when updating (https://github.com/vuejs/core/blob/main/packages/runtime-core/src/ hmr.ts#L78-L99)

However, after the error is reported, the last vdom will be destroyed and the patch(instance.update()) of the rerender cannot be executed.

---

vite内部将.vue拆成两个文件 .css / .js

css报错只需要重新插入head节点。

但是js报错会导致vue内部执行错误，因为在更新的时候会将vite重新生成的template+script 更新执行 https://github.com/vuejs/core/blob/main/packages/runtime-core/src/hmr.ts#L78-L99

但是报错后会破坏上次的vdom 导致没办法执行rerender的patch(instance.update()).

[poyoho]

我测试了macOS，使用了@vitejs/plugin-vue@1.10.2，问题依然存在，我截图说明了一下测试流程

may be the rerender script don't exec the setup script again.

setup lifecycle will exec in the Component setup first time.and the Component is not exec the destroy so no exec the setup Script.

you can chance to destroy the <route-view> and mount the <route-view> that will be exec.😀

[ningbnii]

我测试了macOS，使用了@vitejs/plugin-vue@1.10.2，问题依然存在，我截图说明了一下测试流程

may be the rerender script don't exec the setup script again.

setup lifecycle will exec in the Component setup first time.and the Component is not exec the destroy so no exec the setup Script.

you can chance to destroy the <route-view> and mount the <route-view> that will be exec.😀

但是不修改.vue，只修改.js的情况下，页面是可以热更新的，只有在修改了.vue的前提下，再修改.js才不会热更新