HMR Not Reloading Modifications to External Typescript File

[tehomen]

Related plugins

• plugin-vue
• plugin-vue-jsx

Describe the bug

When importing a ts file into a vue file vite at first will do hmr properly and you'll see the page refresh when making edits to the ts file, but once you make a change to the vue template hmr no longer works when editing that ts file. You will see in the node console "[vite] hmr update ..." and in the browser console "[vite] hot updated: ...", but the page never updates with the changes made to the ts file.

Reproduction

https://stackblitz.com/edit/vitejs-vite-vmmtoz?file=src%2Ftest.ts

Steps to reproduce

Initial Check:

1. Go to the file "test.ts"
2. Uncomment line number 9
3. You will see the change appear in the page.

Everything will seem to be working fine, now do the following after the initial check:

Breaking HMR:

Break HMR:

1. Go to the file App.vue
2. Uncomment line number 6
3. You will see the page update (but now HMR is broken)

Check Result of Breaking HMR:

1. Go back to the file "test.ts"
2. Comment line number 9
3. You will see that the page remains the same as before commenting.

System Info

Windows 10
Edge Browser

Used Package Manager

npm

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

[yyx990803]

This is a Vue core issue and is no longer reproducible in latest (3.3.13)