HMR with an external script does not proper reload

[cub]

Describe the bug

I have a problem with HMR with Vue. When I modify my external script, HMR reload the .vue but stay in an old state.

<!-- test-hmr.vue -->
<template>
  <div class="test-hmr">
    TestHmr !
    {{ qqq }}
  </div>
</template>
<script lang="ts" src="./test-hmr.ts"></script>

// test-hmr.ts
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'TestHmr',
  data() { return { /* qqq:'weeeeeeee' */ }; }
});

I see in the console the warning [Vue warn]: Property "qqq" was accessed during render but is not defined on instance., it's normal. Then I uncomment qqq:'weeeeeeee' and save the .ts. I see in the console [vite] hot updated: /src/components/test-hmr/test-hmr.vue. But the render is not showing the weeeeeeee, it's stuck with the not defined previous state.

On the very first load, it reload/refresh nicely. If you rename the qqq to something else in the .vue, save, then edit accordingly the .ts, it will stuck in previous state.

Note, if I insert the content of my .ts inside the <script>, the HMR works well. The problem only occurs with external script file.

Reproduction

https://github.com/cub/test-hmr

System Info

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 8.83 GB / 15.50 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/bin/node
    npm: 8.5.4 - /usr/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Chromium: 99.0.4844.51
    Firefox: 98.0.1
  npmPackages:
    @vitejs/plugin-vue: ^2.2.4 => 2.2.4 
    vite: ^2.8.6 => 2.8.6

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

[sapphi-red]

I was not able to reproduce with your repro. https://stackblitz.com/github/cub/test-hmr?file=src%2Fcomponents%2Ftest-hmr%2Ftest-hmr.vue,src%2Fcomponents%2Ftest-hmr%2Ftest-hmr.ts

Does it only happen in a specific environment? And does it still happen with Vite 3?

[github-actions[bot]]

Hello @cub. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[cub]

Uncomment the qqq, the 'weeeeeeee' appear ✅ Change the variable in .vue to qqqq, the 'weeeeeeee' disappear ✅ Change the variable in .ts to qqqq, the 'weeeeeeee' do not appear ❌

[cub]

And yes @sapphi-red , it still happen with Vite 3

[cub]

Still happen with vite 4.0.1 and @vitejs/plugin-vue 4.0.0 (latest version at this time).

[tehomen]

This issue is still happening. When you first start vite, you'll be able to change content in ts file and it will update, but after making a change to anything within the vue template if you change anything within the ts file that the template references vite says it updated but no updates are actually made to the page.

[EmilieOLIVIE]

The issue seems to stem from the following line in main.ts:

// check if the template is the only thing that changed
if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
  output.push(`export const _rerender_only = true`)
}

A temporary workaround is to change export const _rerender_only = true to export const _rerender_only = false in order to force the rerender in all cases, when separate script/template files are involved.

Maybe add a setting to vite to allow cache disabling?