HMR does not work with certain code in Vue
See original GitHub issueDescribe the bug
When using slot, the prop is not updated after modifying the prop of the child component.
<template>
<!-- Simple example -->
<Form>
<!-- ⬇️ changed it but not updated -->
<FormItem label="second" />
</Form>
</template>
// form.js
import { renderSlot as _renderSlot } from 'vue'
// https://vue-next-template-explorer.netlify.app/#eyJzcmMiOiI8c2xvdCAvPiIsInNzciI6ZmFsc2UsIm9wdGlvbnMiOnsiaW5saW5lIjp0cnVlfX0=
// <slot />
export default (_ctx, _cache) => {
return _renderSlot(_ctx.$slots, 'default')
}
// form-item.js
import { toDisplayString as _toDisplayString } from 'vue'
export default {
props: { label: String },
setup(props) {
// https://vue-next-template-explorer.netlify.app/#eyJzcmMiOiJ7eyBsYWJlbCB9fSIsInNzciI6ZmFsc2UsIm9wdGlvbnMiOnsiaW5saW5lIjp0cnVlfX0=
// {{ label }}
// Generated code:
return (_ctx, _cache) => {
return _toDisplayString(_ctx.label)
}
},
}
Reproduction
Online: https://stackblitz.com/edit/vitejs-vite-z9guvb?file=App.vue&terminal=dev
Repo: https://github.com/sxzz/vite-hmr-issue
pnpm run dev
for Vite examplepnpm run serve
for Webpack example
Webpack works normally, but vite didn’t update prop.
System Info
System:
OS: macOS 12.3.1
CPU: (10) arm64 Apple M1 Max
Memory: 1.40 GB / 32.00 GB
Shell: 3.4.1 - /opt/homebrew/bin/fish
Binaries:
Node: 16.15.0 - ~/Library/Caches/fnm_multishells/70638_1652903045156/bin/node
Yarn: 1.22.18 - ~/.pnpm/bin/yarn
npm: 8.5.5 - ~/Library/Caches/fnm_multishells/70638_1652903045156/bin/npm
Browsers:
Chrome: 101.0.4951.64
Edge: 101.0.1210.47
Firefox: 99.0
Safari: 15.4
Safari Technology Preview: 15.4
npmPackages:
@vitejs/plugin-vue: ^3.0.0-alpha.0 => 3.0.0-alpha.0
vite: ^3.0.0-alpha.1 => 3.0.0-alpha.1
Used Package Manager
pnpm
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/core 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.
Issue Analytics
- State:
- Created a year ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Webpack dev server HMR not working with TypeScript modules
I have a Vue 2 application that is mostly JS, and I am trying to introduce some new TypeScript modules and components.
Read more >Features | Vite
Vite provides first-party HMR integrations for Vue Single File Components and React Fast Refresh. There are also official integrations for Preact via @prefresh/ ......
Read more >CLI Service - Vue CLI
The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of ...
Read more >Med: HMR in Meteor + VueJS
It does that by starting a socket server in your meteor server, and has some code run on the meteor client that connects...
Read more >Hot Module Replacement - webpack
HMR is not intended for use in production, meaning it should only be used in development. See the building for production guide for...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Closing as I confirmed this worked after upgrading Vue to 3.2.38.
Looks similar to #7839. But it is interesting that this does not reproduce with webpack. Maybe https://github.com/vuejs/core/pull/5781 work for this too?