Vue regression in 2.4.3

[jods4]

Describe the bug

This looks like a Vue or SFC compiler bug, but the only thing that changed (I double-checked by diffing package-lock.json) is Vite being upgraded from 2.4.1 to 2.4.3.

In 2.4.1 my app works fine.

In 2.4.3 it doesn't start because of this error, straight in my root (App) component:

TypeError: Cannot destructure property 'Component' of 'undefined' as it is undefined.

Where it fails is this SFC generated code:

_createVNode(_component_router_view, null, {
        // Apparently at runtime this lambda receives undefined so destructuring fails
        default: _withCtx(({ Component, route }) => [
        // ...

Reproduction

My App.vue contains this template, which is the (first?) part that fails:

    <router-view v-slot="{ Component, route }">
      <suspense :key="route.path" v-else>
        <component :is="Component" />
        <template #fallback>Loading...</template>
      </suspense>
    </router-view>

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 5.97 GB / 15.79 GB
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.1593.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.4 => 1.2.4
    vite: ^2.4.2 => 2.4.3

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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[patak-dev]

Would you create a minimal reproduction in github so it is easier for others to check it out?

[jods4]

I can't seem to rollback to previous versions either -- although my coworker can.
It looks like the culprit is that I have multiple versions of Vue loaded, even on a fresh start without HMR.
This means 2 copies of static state such as currentInstance, which then breaks everything.

I'll try to put up a minimal repro.

[jods4]

Of course, minimal repros don't exhibit the problem. This is gonna be hard :(
If you have any tip or idea to find the cause in my project, it'd be welcome.

[jods4]

More observations, as I am trying, without success, to isolate this by detaching my full app from its back-end.

I don't have the same issue as above, but I have other random failures, such as plugin-vite-svg-sprite ok in 2.4.1 and half-working in 2.4.3.

One minute later: going back-and-forth from 2.4.1 to 2.4.3 (or maybe just restarting Vite a second time?) now triggers the multiple Vue versions issue.

Taking a lunch break, I'll try to cut down the project to a minimal bug, maybe I'll manage to provide a repro after all!

[jods4]

I have not pinpoint a precise, small repro; but I have a glimpse at what is going on.

-> The root cause of JS errors such as destructuring undefined is because some modules are loaded twice, at apparent different versions (see screenshot above). This is despite being a fresh start and no HMR has been triggered yet.

-> It seems to happen when Vite encounters new dependencies. Restarting vite seems to fix the issue, until new dependencies are encountered again.

Observations on one of my projects:

• Vite 2.4.1, everything seems ok.
• Let's npm i vite 2.4.3.
• Start Vite -> error occurs.
• Restart Vite -> error is gone.
• Go to a different page in app, which makes Vite discover new node_modules dependencies.
• Vite performs its magic (pre-bundling / caching dependenices) and triggers a full reload of app.
• App reloads -> error occurs.
• Restart Vite -> error is gone... until you go to a new page that triggers new node_modules dependencies again.

Hopefully that provides you some indications about what's going on and you can relate it to recent changes.

[patak-dev]

@jods4 would you try reverting this PR #4091 commit and see if this is what is causing your issue? I don't see any other that touched deps resolution.

[jods4]

@patak-js I will.
Now that I could work around the issue I need to get some work done but I'll report later if that seems to be the culprit.

[jods4]

@patak-js That doesn't seem to be it. I reversed #4091 but after each npm i that affects one front-end framework it still crashes. It's a bit tricky to repro but it's consistent so I'll try to cut a lot of stuff out of it and give you precise instructions.

[jods4]

@patak-js Here's a repro.
Clone this, it's an ugly frankenbuild with the bare minimum to make one page work, that I know exhibits the bug reliably.
https://github.com/jods4/bug-vite-manyvues.git

To see the bug, from a fresh clone, just do what you usually would:

git clone https://github.com/jods4/bug-vite-manyvues.git .
npm i
npm run dev

(This code is tested in Chromium only)
I did it in a fresh folder on my machine (Windows 10) and the application doesn't start properly. The visible issue in console is this:

Uncaught TypeError: Cannot destructure property 'Component' of 'undefined' as it is undefined.

IMHO the underlying problem is that vue is actually loaded twice is you look in Network console.

Notice: if you restart Vite, it'll work.
Here's how you can trigger the problem again:

• Open package.json
• Change the fixed dependency @poppersjs/core from 2.9.1 to 2.9.2 (or vice-versa)
• npm i
• npm run dev

The problem is here again.
If you restart Vite it'll go away.
Just repeat the procedure switching one version for the other, npm i, and the problem is back.

[userquin]

@jods4 there is a problem on default slot on adroner-layer.ts, missing props, once fixed then the problem is with Suspense, cannot have more than 1 children (without applying the change, just cloned):

export default defineComponent({
  setup(_, { slots }) {
    const adorners = sref([] as VNode[]);

    listen<MountTarget>("mount", ({ comp, props, children }) => {
      const adorner = h(comp, { ...props, key: ++id + "" }, children);
      adorners.push(adorner);
      return () => remove(adorners, adorner);
    });

    return () => [slots.default!({}), ...adorners]; // <=== MISSING props {}
  },
});

then

[jods4]

@userquin Thanks but I don't think that's the issue here, don't worry too much about the application itself. It works well enough to demonstrate the Vite issue.

The issue is that after upgrading, every time Vite detects new dependencies in node_modules it injects multiple versions of Vue in the app (and nothing works of course).

BTW that Suspense warning is a Vue bug, there is a single root. It was marked fixed by Vue team but the PR fixed is still unmerged, see vuejs/core#4016

[userquin]

@jods4 but adding props to the default slot just works:

[jods4]

@userquin It also works "as is", without the props -- you only need to restart Vite to make it work.

A missing prop in a component can't cause Vite to serve 2 different versions of Vue at the same time, can it?

[userquin]

It is really strange, just copying node_modules/.vite directory to a temporary one and then remove it, update the dependency and then npm i and npm run dev, the content is the same, just some IE changes on @poppersjs/core.

I can see the version 2.9.2 is not updated.

Adding build-serve: vite build && vite preview and making the same process just works, there problem dissapear, really strange.

[userquin]

@jods4 adding all deps causing a full reload on vite config, it seems to work switching popper dep. I see full reload of each dep and seems to be a race condition, there are warnings about resolveComponent cannot be used inside render/setup function.

Adding optimizeDeps with all deps to vite.config.js seems to work, maybe can help:

   esbuild: command !== 'build',
  
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      'debounce',
      '@popperjs/core',
      'outdent',
      'vite-plugin-svg-sprite/es/runtime',
      'popmotion',
      'stylefire',
      'framesync',
      'highlight.js/lib/core',
      'highlight.js/lib/languages/javascript',
      'highlight.js/lib/languages/xml',
      'highlight.js/lib/languages/yaml'
    ]
  },

  build: {
    target: 'esnext',
    outDir: '../Portal/wwwroot',
  ...

[jods4]

@userquin I debugged that warning.
It's caused by having multiple copies of Vue served to the browser, so it's a symptom of this bug.

Basically, one Vue copy is creating components and sets its own currentInstance, but then the component references another Vue copy and resolveComponent thinks there's no currentInstance because it looks at a second static state different from the first.

-> Restart Vite and everything will be in order again.

Adding optimizeDeps with all deps to vite.config.js seems to work, maybe can help:

That would surely help minimize the issue, because doing so means there is no more dependencies that Vite will find at runtime (which is something that triggers this bug and needs a restart).

Then the only trigger of the bug is when you do npm i I suppose.

As far as workarounds go, atm I'm ok with restarting Vite, it's only once and then it doesn't happen anymore.

[patak-dev]

@jods4 did you try to add resolve.dedupe to your config file? https://vitejs.dev/config/#resolve-dedupe

resolve: {
  dedupe: [ 'vue' ]
}

[jods4]

@patak-js No, I did not try that.

Maybe it'll help with the bug, but I shouldn't need that if my npm list vue doesn't show dupes, right?

[jods4]

I noticed other errors recently, that have a similar cause...

After working for a while, my global router hooks aren't called anymore, even after a full browser reload.
I noticed my own module ./router.ts that sets everything up is imported twice, even on a full reload.

Notice how main.ts imports t=...8982 and app.vue, right after that, imports t=...8443.

I also noticed that sometimes my icons (svg files turned into components thanks to vite-plugin-svg-sprite) stop appearing, for a similar reason.

[userquin]

When the error occurs, there are a few duplicate deps, I think it is some dependency that triggers the full reload and then all deps change on tree shake, similar to the router version change; you only need to reproduce the problem and then inspect the .vite entry on source tab on dev tools.

[jods4]

Small update: I can confirm this still reproduces in latest 2.4.4.

[bluwy]

I tested the repro with Vite 2.8.6 and it looks like it's working fine now. @jods4 Can you confirm if this is fixed on your end?

[jods4]

Haven't seen it in a while, I must admit.
I'm soon gonna pick up work on the project that was problematic above, I'll close the issue if it now works without issue.

[bluwy]

Hi @jods4 we're in the process of cleaning up the issues. Wondering if you had managed to verify this yourself?

[jods4]

Hi @bluwy sorry the planning shifted and I haven't picked up work on said project, should happen this month.
You should just go ahead and close if it's supposed to be fixed.
I'll comment or open a new issue if later I observe it's not.

[patak-dev]

Given all the changes to dependency pre-bundling in 2.9, I think it is a good idea to close it now. As you said @jods4, it would be great if you find the time to test your project again. Please create a new issue against latest linking to this one if there is still an issue. Thanks!