vue__WEBPACK_IMPORTED_MODULE_0__.getCurrentInstance() is null since 8.20

[blizzz]

I am trying to build workflow_pdf_converter, which has very puny vue code base:

• main.js
• ConvertToPdf.vue

The builds succeeds, but the the NcSelect component is unusable in Personal Settings → Flow. It does not have the default value assigned, and changing the value is not taken over either.

This is what I see in the browser console. The `setup()` function that is mentioned belongs to the NcSelect component.

TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.getCurrentInstance() is null
    useModelMigration https://nc.zara/master/apps-repos/workflow_pdf_converter/js/workflow_pdf_converter-main.js:32642
    setup https://nc.zara/master/apps-repos/workflow_pdf_converter/js/workflow_pdf_converter-main.js:31604
    cn https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    o https://nc.zara/master/dist/core-common.js:1
    componentInstance https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    C https://nc.zara/master/dist/core-common.js:1
    C https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    run https://nc.zara/master/dist/core-common.js:1
    ia https://nc.zara/master/dist/core-common.js:1
    kn https://nc.zara/master/dist/core-common.js:1
    vn https://nc.zara/master/dist/core-common.js:1
    promise callback*mn https://nc.zara/master/dist/core-common.js:1
    kn https://nc.zara/master/dist/core-common.js:1
    oa https://nc.zara/master/dist/core-common.js:1
    update https://nc.zara/master/dist/core-common.js:1
    notify https://nc.zara/master/dist/core-common.js:1
    85471 https://nc.zara/master/dist/core-common.js:1
    addRule https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    _ https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    _withCommit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    fetchRules https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    fetchRules https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    _ https://nc.zara/master/dist/core-common.js:1
    dispatch https://nc.zara/master/dist/core-common.js:1
    dispatch https://nc.zara/master/dist/core-common.js:1
    mounted https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    cn https://nc.zara/master/dist/core-common.js:1
    Wn https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    91902 https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    A https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    c https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    O https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    <anonymous> https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    <anonymous> https://nc.zara/master/dist/workflowengine-workflowengine.js:1
core-common.js:1:2102446
    pn https://nc.zara/master/dist/core-common.js:1
    hn https://nc.zara/master/dist/core-common.js:1
    dn https://nc.zara/master/dist/core-common.js:1
    cn https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    _init https://nc.zara/master/dist/core-common.js:1
    o https://nc.zara/master/dist/core-common.js:1
    componentInstance https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    f https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    e https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    init https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    h https://nc.zara/master/dist/core-common.js:1
    C https://nc.zara/master/dist/core-common.js:1
    C https://nc.zara/master/dist/core-common.js:1
    Ti https://nc.zara/master/dist/core-common.js:1
    _update https://nc.zara/master/dist/core-common.js:1
    a https://nc.zara/master/dist/core-common.js:1
    get https://nc.zara/master/dist/core-common.js:1
    run https://nc.zara/master/dist/core-common.js:1
    ia https://nc.zara/master/dist/core-common.js:1
    kn https://nc.zara/master/dist/core-common.js:1
    vn https://nc.zara/master/dist/core-common.js:1
    (Async: promise callback)
    mn https://nc.zara/master/dist/core-common.js:1
    kn https://nc.zara/master/dist/core-common.js:1
    oa https://nc.zara/master/dist/core-common.js:1
    update https://nc.zara/master/dist/core-common.js:1
    notify https://nc.zara/master/dist/core-common.js:1
    85471 https://nc.zara/master/dist/core-common.js:1
    addRule https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    _ https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    _withCommit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    commit https://nc.zara/master/dist/core-common.js:1
    fetchRules https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    fetchRules https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    _ https://nc.zara/master/dist/core-common.js:1
    dispatch https://nc.zara/master/dist/core-common.js:1
    dispatch https://nc.zara/master/dist/core-common.js:1
    mounted https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    cn https://nc.zara/master/dist/core-common.js:1
    Wn https://nc.zara/master/dist/core-common.js:1
    mount https://nc.zara/master/dist/core-common.js:1
    $mount https://nc.zara/master/dist/core-common.js:1
    91902 https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    A https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    c https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    O https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    <anonymous> https://nc.zara/master/dist/workflowengine-workflowengine.js:1
    <anonymous> https://nc.zara/master/dist/workflowengine-workflowengine.js:1

The error starts to appear with 8.20. When building with up to 8.19, everything is fine and the UI is usable and functional.

Please advice, cc @kyteinsky @ShGKme @julien-nc @hamza221

[ShGKme]

In general case, it isn't valid to mix several Vue frameworks inside a single render (render a Vue-component using one copy of Vue framework as a part of Vue-component rendered by another copy of Vue framework.).

Explanation

Vue is stateful, and its rendering implementation uses Vue internal state.

workflowengine
├─── Vue_1
└─── <Workflow>
     └── <ConvertToPdf>
          ├─── Vue_2
          └─── <NcSelect>

In you case, we have Vue.js framework twice in the document. It would be fine it they are used in different, separated apps, rendering different nodes.

But in the Workflow app, <ConvertToPdf> and <NcSelect> component instances are rendered by Vue_1 module while they actually include and use Vue_2.

During the rendering:

• Vue_1 creates <NcSelect> component instance and sets it as the currentInstance
• Vue_2 checks getCurrentInstance and has nothing. Vue_2 doesn't render anything.

In the past it worked by chance, because:

• Not very different Vue versions were used
  • e.g. Vue 2.7 workflow plugin may break in Vue 2.6 Workflow app
• Workflow components were simple objects and didn't import anything from Vue

Thus, this is neither NcSelect nor nextcloud-vue bug but the Workflow app issue.

[ShGKme]

A proper way to render two independent Vue apps inside each others are:

• Mount a new Vue app in an element inside another Vue app instead of rendering a child component
  • This is what UserMenu and Viewer does
  • Creating a vue app should be a part of the second app, so its components use its Vue
• Use Web Components

It would also allow to not bind to a specific Vue version, e.g., develop workflow plugins in Vue 3, or update server to Vue 3 without breaking Vue 2 plugins, or develop plugins without Vue at all

[blizzz]

Thanks for the explanation @ShGKme