Cannot set properties of null (setting 'textContent')

[Doeke]

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-pe69dq?file=src/App.vue

Steps to reproduce

1. Open reproduction link with Chrome/Firefox
2. Edit the text in the App.vue template
3. HMR will crash with type error in console and changes are not visible in preview window

What is expected?

HMR should not crash when working with external components

What is actually happening?

Changes to template are not visible without a full reload, and I get the following error in browser console:

TypeError: Cannot set properties of null (setting 'textContent')
...
[HMR] Something went wrong during Vue component hot-reload. Full reload required.

System Info

Tested in Google Chrome and Firefox, on Ubuntu 22.10

Any additional comments?

I run into this bug a lot while working on applications that use components imported from npm component libraries.

This closed thread is also possibly related to this issue: #4707

[SimonCsoma]

Does also not work on Windows+Chrome

[jorancornelisse]

Does also not work on Mac-OS+Chrome

[Jevon617]

The reason is that, during the first mount, the loading changed in the onMounted hook, triggering patch. Vue only processed the dynamic node span, while for the static node h1, because its parentComponent (SomeSlotComponent in the demo) is a component from a JavaScript file, vite-plugin-vue does not add __hmrId to this type of component. When encountering this situation, Vue will not go deep into traverseStaticChildren, so the el value of h1 is not available. When we change the file and trigger the hmr, it will cause this bug, but I don't know if this bug is vite's or vue's clearly.

[Doeke]

@Jevon617

Thanks for investigating. Sounds like this bug affects every vite+vue project that import components with slots from a node module. It also seems to be present in older versions I tried. I'm also not sure which repo this bug belongs to. Do you think I should open an issue on vite-plugin-vue?

[Jevon617]

@Doeke

I think vite-plugin-vue has successfully notified Vue to update this file, but it cannot know whether a js file is a Vue component or not. Therefore, this issue is irrelevant to it.

For Vue, it should handle this situation with additional processing. I will submit a PR for this issue.