Skip to content

HMR does not work with certain code in Vue #8224

@sxzz

Description

@sxzz

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug: upstreamBug in a dependency of Vitefeat: hmrp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions