N00ts / vue3-treeview

a simple treeview in vue js 3
MIT License
71 stars 61 forks source link

Unhandled error on update nodes #35

Closed padoauk closed 1 year ago

padoauk commented 1 year ago

Hi.

I appreciate vue3-treeview. In a project I met an issue of "[Vue warn]: Unhandled error during execution of scheduler flush ..." in running vue3-treeview. I want to have a way to resolve this. Any idea ?

Following is the code. when loadNodes() invoked for the first time. there's no error. But for the second time and after, the error occurs.

vue is 3.2.45 vue3-treeview is 0.4.1.

<template>
    <v-btn @click="loadNodes"></v-btn>
    <TreeView
        :nodes="nodes0"
        :config="config0"
    >
    </TreeView>
</template>

<script setup>
import { ref } from "vue"
import { default as TreeView } from "vue3-treeview"

const nodes0 = ref({});
const config0 = ref({
  roots: [],
  padding: 15,
  editable: true,
  checkboxes: true
});

const loadNodes = () => {
  fetch("http://localhost:3000", { method: 'GET' }).then((response) => {
    const treenodes = genTreeNodes(response);
    const rootname = getRootName(response);
    nodes0.value = treenodes;
    config0.value.roots = [rootname];
  });
};

</script>

and runtime error.

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Anonymous key="project01/.git" node= 
Object { children: [], text: ".git", id: "project01/.git", parent: "project01" }
 depth=1  ... > 
  at <AsyncComponentWrapper key="project01/.git" node= 
Object { children: [], text: ".git", id: "project01/.git", parent: "project01" }
 depth=1  ... > 
  at <Anonymous key=0 parent-id="project01" depth=1  ... > 
  at <AsyncComponentWrapper key=0 parent-id="project01" depth=1  ... > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="level" > 
  at <Anonymous key="project01" node= 
Object { children: (7) […], text: "project01", state: {…}, id: "project01", parent: null }
 depth=0  ... > 
  at <AsyncComponentWrapper key="project01" node= 
Object { children: (7) […], text: "project01", state: {…}, id: "project01", parent: null }
 depth=0  ... > 
  at <Anonymous depth=0 parent-id=null onNodeOpened=fn  ... > 
  at <Anonymous nodes= 
Object { project01: {…}, "project01/.git": {…}, "project01/.gitignore": {…}, "project01/package.json": {…}, "project01/src": {…}, "project01/src/app.js": {…}, "project01/src/entry.py": {…}, "project01/src/entry.py~": {…}, "project01/src/entry2.py": {…}, "project01/src/lib": {…}, … }
 config= 
Object { roots: (1) […], padding: 15, editable: true, checkboxes: true }
 onNodeOpened=fn  ... > 
  at <FileManager base-url="http://localhost:3000/" root-path="project01" onOpenfile=fn<openfile> > 
  at <App> runtime-core.esm-bundler.js:40:16

Uncaught (in promise) TypeError: node.value.state is undefined
    editable vue3-treeview.es.js:1212
    run reactivity.esm-bundler.js:190
    get value reactivity.esm-bundler.js:1171
    editing vue3-treeview.es.js:1215
    run reactivity.esm-bundler.js:190
    get value reactivity.esm-bundler.js:1171
    getter runtime-core.esm-bundler.js:1711
    run reactivity.esm-bundler.js:190
    job runtime-core.esm-bundler.js:1801
    flushPreFlushCbs runtime-core.esm-bundler.js:336
vue3-treeview.es.js:1212:4
    flushJobs runtime-core.esm-bundler.js:419
    (Async: promise callback)
    queueFlush runtime-core.esm-bundler.js:298
    queueJob runtime-core.esm-bundler.js:292
    effect runtime-core.esm-bundler.js:5761
    triggerEffect reactivity.esm-bundler.js:400
    triggerEffects reactivity.esm-bundler.js:390
    triggerRefValue reactivity.esm-bundler.js:1021
    set value reactivity.esm-bundler.js:1066
    fetchGlobb FileManager.vue:145
    (Async: promise callback)
    fetchGlobb FileManager.vue:141
    (Async: promise callback)
    fetchGlobb FileManager.vue:137
    patchStopImmediatePropagation runtime-dom.esm-bundler.js:358
    callWithErrorHandling runtime-core.esm-bundler.js:173
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:182
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:192
    invoker runtime-dom.esm-bundler.js:345
    (Async: EventListener.handleEvent)
    addEventListener runtime-dom.esm-bundler.js:279
    patchEvent runtime-dom.esm-bundler.js:297
    patchProp runtime-dom.esm-bundler.js:376
    mountElement runtime-core.esm-bundler.js:5224
    processElement runtime-core.esm-bundler.js:5196
    patch runtime-core.esm-bundler.js:5116
    componentUpdateFn runtime-core.esm-bundler.js:5656
    run reactivity.esm-bundler.js:190
    update runtime-core.esm-bundler.js:5763
    setupRenderEffect runtime-core.esm-bundler.js:5777
    mountComponent runtime-core.esm-bundler.js:5559
    processComponent runtime-core.esm-bundler.js:5517
    patch runtime-core.esm-bundler.js:5119
    mountChildren runtime-core.esm-bundler.js:5303
    mountElement runtime-core.esm-bundler.js:5213
    processElement runtime-core.esm-bundler.js:5196
    patch runtime-core.esm-bundler.js:5116
    mountChildren runtime-core.esm-bundler.js:5303
    mountElement runtime-core.esm-bundler.js:5213
    processElement runtime-core.esm-bundler.js:5196
    patch runtime-core.esm-bundler.js:5116
    componentUpdateFn runtime-core.esm-bundler.js:5656
    run reactivity.esm-bundler.js:190
    update runtime-core.esm-bundler.js:5763
    setupRenderEffect runtime-core.esm-bundler.js:5777
    mountComponent runtime-core.esm-bundler.js:5559
    processComponent runtime-core.esm-bundler.js:5517
    patch runtime-core.esm-bundler.js:5119
    mountChildren runtime-core.esm-bundler.js:5303
    mountElement runtime-core.esm-bundler.js:5213
    processElement runtime-core.esm-bundler.js:5196
    patch runtime-core.esm-bundler.js:5116
    componentUpdateFn runtime-core.esm-bundler.js:5656
    run reactivity.esm-bundler.js:190
    update runtime-core.esm-bundler.js:5763
    setupRenderEffect runtime-core.esm-bundler.js:5777
    mountComponent runtime-core.esm-bundler.js:5559
    processComponent runtime-core.esm-bundler.js:5517
    patch runtime-core.esm-bundler.js:5119
    render2 runtime-core.esm-bundler.js:6278
    mount runtime-core.esm-bundler.js:4474
    mount runtime-dom.esm-bundler.js:1607
    <anonymous> main.js:17
N00ts commented 1 year ago

Can you provide an exemple using a sanbox instead of copy / paste your code ? It is easier to post a codesandbox / repo that repropduce the issue.

Regards