question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR does not work with certain code in Vue

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
sapphi-redcommented, Oct 23, 2022

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

2reactions
sapphi-redcommented, May 19, 2022

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found