HMR does not work with certain code in Vue

sxzz commented 2 years ago

Describe 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 example
pnpm 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

[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 https://github.com/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.

sxzz commented 2 years ago

https://user-images.githubusercontent.com/6481596/169143561-de08b530-dcf3-4d76-9fda-aa4d1cadfca4.mp4

Vite and Webpack

sapphi-red commented 2 years ago

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?

thonymg commented 2 years ago

Same issue, in my case i must restart the server to see change on certain file. But on other files it's work perfectly

BSlaven commented 2 years ago

I have the same issue in react app. Change in one component triggers hrm as well as changes in its module.css file, but in the other component it does not.

crystalfp commented 2 years ago

Same problem when upgrading vite from 2.9.9 to 2.9.12 I'm working on vue 3 on Windows.

daniloribeiro00 commented 2 years ago

Tried with Vite 3.0.0 but it still doesn't work properly

oski646 commented 2 years ago

I've tried to remove everything in a single page to the moment that HMR works fine, and I found that...

HMR works:

<template>
  <Container class="mt-12">test</Container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Container from '@/components/app/Container.vue'

const route = useRoute()
const player = computed(() => route.params.player)
</script>

HMR doesn't work:

<template>
  <Container class="mt-12">test</Container>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import Container from '@/components/app/Container.vue'
import { useCookies } from 'vue3-cookies'

const route = useRoute()
const player = computed(() => route.params.player)
</script>

The only difference is single import: import { useCookies } from 'vue3-cookies'. Maybe it will be helpful for someone who will be creating a fix.

vue3-cookies (1.0.6): https://github.com/KanHarI/vue3-cookies

sapphi-red commented 1 year ago

Closing as I confirmed this worked after upgrading Vue to 3.2.38.

vitejs / vite