HMR failure, must restart Vite

[jods4]

I am opening this FYI. As I don't have the time to find out what is required for a proper repro, I'm going to close it immediately. @yyx990803 if you want to look at a private repository that reproduces this issue get in touch with me on discord (same handle).

Describe the bug

I start Vite on one of my projects.
Everything works fine.

Now touch any .ts file with an irrelevant edit. Let's say sequence.ts.
This appears on the terminal and looks quite suspicious given the simple edit:

Application doesn't work anymore, because of a JS bug.
Full app refresh with F5 doesn't work either!

Only solution seems to be a full restart of Vite: now app works again.

My Analysis

The JS failure in browser is related to a static global field exported by one TS module, that seems to be undefined after the edit, always.

Turns out the containing module is imported twice.
First with a timestamp: state.ts?t=1610318299861.
But then a later file action.ts imports the same module as just state.ts, no timestamp in querystring.

Needless to say for the browser that's 2 different modules, and they don't share variables which leads to all kind of bugs.

Why Vite references 2 different versions of the same file after HMR, I haven't found out.

System Info

• vite version: 2.0.0-beta.19
• Operating System: win 10
• Node version: 15
• Package manager and version: npm 7

[jods4]

@yyx990803 This bug is incredibly impacting. I basically have to restart Vite at every edit I make.
I am reopening as I figured out what Vite doesn't like here.

There's a minimal repro for you here: https://github.com/jods4/vite-1477

The bug happens when you have circular dependencies amongst your module (something that is fine in native ESM, under some initialization constraints).

In the repo, App.vue imports module A (it seems to be key to trigger HMR and reproducing the bug that a Vue SFC is involved); which imports module B, which imports module C, which imports module A again.

So App.vue -> A -> B -> C -> A.
Each module logs once in the console that it has been initialized.

As this is an empty app, you have to look carefully to observe the bug ;)
Here's how:

1. Clone the repo, start Vite.
2. Open your dev tools and look at the network and console.
   

Nothing unusual here: each file has been fetched from network and we can see each module initialized once in the console.

3. Now just hit save inside module B. This triggers HMR of App.vue.
4. The app is now broken but it's hard to see it. Just hit F5 and do a full reload of the app.
5. You'll see this in devtools:

And that's broken.
Module A has been imported twice: once without a query string and once with a t=... query.
These are two different modules as far as the browser is concerned, and you can see that Module A has logged twice in the console.

This is not how the app should work.
If you shut down Vite and start again, it works alright until you trigger HMR again.

[jods4]

BTW I can confirm this is still a problem in latest Vite, tested NOK in beta 31.