TypeError: $options.label is not a function

[eboileau]

A clear and concise description of what the bug is.

After installing json-server, axios, and package maintenance (npm audit fix), I suddenly have issues with the PrimeVue TreeSelect component, however I don't know if this is related to this. But going back to earlier commits does not resolve the problem. From view to view, it seems to change, and this is not consistent, e.g. depends on page refresh.

Similar open issues:

https://github.com/primefaces/primevue/issues/3347

https://github.com/primefaces/primevue/issues/2802

How to reproduce

1 - Click on one of the TreeSelect component (Technologies, Species, and Modification in the latest version), with or without the API.

Output or error messages.

[Vue warn]: Computed property "label" is already defined in Methods. 
  at <TreeNode key="0" node= 
Object { key: "0", label: "Quantification" }
 templates= 
Object { … }
  ... > 
  at <Tree ref="tree" id="pv_id_1_list" value= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <BaseTransition onEnter=fn onLeave=fn<onLeave> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn<bound onOverlayEnter> onLeave=fn<bound onOverlayLeave>  ... > 
  at <Portal appendTo="body" > 
  at <TreeSelect modelValue=undefined onUpdate:modelValue=fn options= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <SectionLayout> 
  at <DefaultLayout> 
  at <SearchView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App>

[Vue warn]: Property "modelValue" was accessed during render but is not defined on instance. 
  at <TreeNode key="0" node= 
Object { key: "0", label: "Quantification" }
 templates= 
Object { … }
  ... > 
  at <Tree ref="tree" id="pv_id_1_list" value= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <BaseTransition onEnter=fn onLeave=fn<onLeave> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn<bound onOverlayEnter> onLeave=fn<bound onOverlayLeave>  ... > 
  at <Portal appendTo="body" > 
  at <TreeSelect modelValue=undefined onUpdate:modelValue=fn options= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <SectionLayout> 
  at <DefaultLayout> 
  at <SearchView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> 

[Vue warn]: Property "placeholder" was accessed during render but is not defined on instance. 
  at <TreeNode key="0" node= 
Object { key: "0", label: "Quantification" }
 templates= 
Object { … }
  ... > 
  at <Tree ref="tree" id="pv_id_1_list" value= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <BaseTransition onEnter=fn onLeave=fn<onLeave> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn<bound onOverlayEnter> onLeave=fn<bound onOverlayLeave>  ... > 
  at <Portal appendTo="body" > 
  at <TreeSelect modelValue=undefined onUpdate:modelValue=fn options= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <SectionLayout> 
  at <DefaultLayout> 
  at <SearchView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> 

[Vue warn]: Unhandled error during execution of render function 
  at <TreeNode key="0" node= 
Object { key: "0", label: "Quantification" }
 templates= 
Object { … }
  ... > 
  at <Tree ref="tree" id="pv_id_1_list" value= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <BaseTransition onEnter=fn onLeave=fn<onLeave> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn<bound onOverlayEnter> onLeave=fn<bound onOverlayLeave>  ... > 
  at <Portal appendTo="body" > 
  at <TreeSelect modelValue=undefined onUpdate:modelValue=fn options= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <SectionLayout> 
  at <DefaultLayout> 
  at <SearchView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> 

[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 <TreeNode key="0" node= 
Object { key: "0", label: "Quantification" }
 templates= 
Object { … }
  ... > 
  at <Tree ref="tree" id="pv_id_1_list" value= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <BaseTransition onEnter=fn onLeave=fn<onLeave> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn<bound onOverlayEnter> onLeave=fn<bound onOverlayLeave>  ... > 
  at <Portal appendTo="body" > 
  at <TreeSelect modelValue=undefined onUpdate:modelValue=fn options= 
Array(4) [ {…}, {…}, {…}, {…} ]
  ... > 
  at <SectionLayout> 
  at <DefaultLayout> 
  at <SearchView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> 

Uncaught (in promise) TypeError: $options.label is not a function
    render$1 tree.esm.js:421
    renderComponentRoot runtime-core.esm-bundler.js:914
    componentUpdateFn runtime-core.esm-bundler.js:5649
    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

Additional context

├── @rushstack/eslint-patch@1.2.0
├── @vitejs/plugin-vue@4.1.0
├── @vue/eslint-config-prettier@7.1.0
├── @vue/test-utils@2.3.2
├── autoprefixer@10.4.14
├── axios@1.4.0
├── eslint-plugin-vue@9.10.0
├── eslint@8.37.0
├── jsdom@21.1.1
├── pinia@2.0.33
├── postcss@8.4.22
├── prettier@2.8.7
├── primeicons@6.0.1
├── primevue@3.29.2
├── tailwindcss@3.3.1
├── vite-svg-loader@4.0.0
├── vite@4.2.1
├── vitest@0.29.8
├── vue-router@4.1.6
└── vue@3.2.47

What browser were you using?

Firefox

What version of Sci-ModoM were you using?

dev

[eboileau]

I don't get it, this seemed to happen only when I restarted the client on the Search page. If I started anew and went to the Search page, or visited another page before, this didn't happen. Now, I can't reproduce it...

[eboileau]

suddenly same problem now with the flask-vue-testbed...