vite
vite copied to clipboard
HMR doesn't update node attributes when Vue attribute stops being fallthrough
Describe the bug
When a prop is added to a child component, if the parent was previously passing that prop through as a fallthrough attribute and defining it as a prop now means it is no longer a fallthrough attribute, the attribute is not removed by HMR upon the save of the child. For example:
Game.vue
<Board
:squares="game.history[game.stepNumber].squares"
@cellClicked="(i) => handleClick(i)"
foobar="baz"
/>
Board.vue
const props = defineProps({
squares: Array//,
//foobar: String
});
As foobar
is not a prop, it is applied to the Board
element's top-level div
as a fallthrough attribute:
But, if I uncomment the prop in the Board
component and save:
const props = defineProps({
squares: Array,
foobar: String
});
Some DOM is updated, but the fallthrough attribute is not removed:
A full refresh of the page, however, removes the attribute, indicating that the problem is with HMR.
Reproduction
Create parent and child element, add fallthrough attr in parent, then add it as prop to child and save
System Info
System:
OS: Windows 10 10.0.19042
CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
Memory: 3.50 GB / 15.64 GB
Binaries:
Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.423.0), Chromium (105.0.1343.33)
Internet Explorer: 11.0.19041.1
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.