CurrentInstance / currentRenderingInstance is null because of multiple chunks (lost context)

[sionzee]

Version

3.0.0-beta.12

Reproduction link

https://github.com/sionzeecz/vue-next-multiple-chunks-issue

Steps to reproduce

1. Clone the repository
2. Run npm install
3. Run npm run build
4. Open public/index.html in your browser
   Check console for xx warnings xx errors

What is expected?

It should render the component without any issues

What is actually happening?

Because of being bundled in multiple chunks the activeInstance is not accessible outside of webpack a. bundle, so when the component is loaded in webpack b. bundle then the activeInstance is again null. Happens already on vue-directive Transition.

Console output:

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: Unhandled error during execution of render function 
  at <BaseTransition appear=false persisted=false onBeforeEnter=fn<onBeforeEnter>  ... > 
  at <Transition> 
  at <Comp>

TypeError: Cannot read property 'subTree' of null

[pikax]

The issue is cause by the build.

If you check your dist files yill find they are huge (~900kb each and 76kb prod).

This is cause each compiled file containing the vue3 code. Altho in you code you only access the the vue through window.Vue, and that should cause a problem, but because you are compiling the Comp.vue, your component will import a new vue instance.

import { createVNode as _createVNode, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "TEST", -1 /* HOISTED */)

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock(_Transition, null, {
    default: _withCtx(() => [
      _hoisted_1
    ]),
    _: 1
  }))
}

One way to solve this is to tell webpack vue is external and load vue in the index.html

//webpack.config.js
  externals: {
vue: "Vue",
},

<script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>

A more "correct" way would be code-splitting and not relying on window.Vue side-effect.

[sionzee]

Even when you make there only single package of Vue by replacing

import {defineComponent} from "vue"

for

const {defineComponent} = window.Vue

It will still keep throwing the errors. (I have checked it and there is only 1 Vue library)

The replication case is huge because I was trying to show the issue without any optimization. In our project we are using Rails and have separated components to chunks.

Our application is really big and we are splitting the code as much as is possible to allow cache individual parts. So our components are separated to "features" branches and each chunk contains the feature.

Then I can easily go to whatever page and type something like
load vue + feature a, b, c (where a have 10 components, b 30 components, ...) and skip the next 500 components.

PS: This was working on Vue 2

[pikax]

It will still keep throwing the errors. (I have checked it and there is only 1 Vue library)

The issue is the vue-loader result, as shown in my previous comment

// compiled template
import { /* imports */ } from "vue" // this is the other `vue` instance that's messing with the rest

EDIT: Have you tried with externals?

[sionzee]

I haven't tried the externals way. I will try it and let you know.

Anyway shouldn't then the Vue be singleton library? I can imagine this can happen to many people.
There are just warnings\errors not related to this. So maybe checking global context if Vue is already loaded and add there message about this possible conflict? I was debugging the error for x hours.

[sionzee]

I have put the globals into html head.

<script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
<script type="text/javascript" src="https://unpkg.com/vuex@4.0.0-beta.2/dist/vuex.global.js"></script>

• Added externals to webpack. (+ vuex) // copied your example
• Removed vue + vuex from packages.json (by uninstalling it)

But the Vuex is looking for process variable

vuex.global.js:290 Uncaught ReferenceError: process is not defined
    at new Store (vuex.global.js:290)
    at Object.createStore (vuex.global.js:283)
    at edit:187

So it won't allow me to load the page properly.

---

If I skip the vuex error. The vue warnings about transition are still there.

[pikax]

If I skip the vuex error. The vue warnings about transition are still there.

Can you update your repo with that code?

[sionzee]

I'm not able to replicate it on the git repository right now. (it is working fine) I will try to struggle it more in few hours. (I was trying it on the real project, so I have maybe forgot to change something)

[yyx990803]

Why are you using window to communicate across chunks when you are using multi-entry build with webpack? Just import as normal and webpack should code split accordingly.

Either way, this is not a vue-next problem.