Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue__WEBPACK_IMPORTED_MODULE_0__.getCurrentInstance() is null since 8.20 #6360

Closed
blizzz opened this issue Jan 9, 2025 · 3 comments
Closed

Comments

@blizzz
Copy link

blizzz commented Jan 9, 2025

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

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

blizzz added a commit to nextcloud/workflow_pdf_converter that referenced this issue Jan 9, 2025
Flow settings interface is not usable otherwise, specifically the mode
selector.

An issue is filed upstream at
nextcloud-libraries/nextcloud-vue#6360

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>
@ShGKme
Copy link
Contributor

ShGKme commented Jan 9, 2025

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 ShGKme closed this as not planned Won't fix, can't repro, duplicate, stale Jan 9, 2025
@ShGKme
Copy link
Contributor

ShGKme commented Jan 9, 2025

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
Copy link
Author

blizzz commented Jan 9, 2025

Thanks for the explanation @ShGKme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants