Warning: Failed to resolve component: demo-node-config-panel

[happylilem]

Hi, I know this might actually be a Vue or element-plus issue instead of something about this library, but I'm able to render all other element tabs except <demo-node-config-panel>, and I wasn't able to find any useful info online about how to properly register this element.

In my main.ts I have:

import { createApp } from 'vue' import App from './App.vue' import VNetworkGraph from "v-network-graph" import "v-network-graph/lib/style.css" import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus) app.use(VNetworkGraph) app.mount("#app")

After directing myself to some root documents, I found that <demo-node-config-panel> is in the same export functions as several other components and they should be rendered together, so I have no idea why this one was left out in my project. If you have any idea on why this is happening please kindly let me know! Thank you in advance.

[dash14]

Hi @happylilem, Unfortunately, the <demo-node-config-panel> in the example is a component that can only be used within the example to simplify the code for the demo, and is not a component provided by v-network-graph.

The source code for the documentation website is available in the following repository, which you can refer to if you would like to use the panel components. https://github.com/dash14/v-network-graph-docs

The source code of <demo-node-config-panel> is as follows: https://github.com/dash14/v-network-graph-docs/blob/main/docs/.vitepress/components/controls/appearance/NodeConfigPanel.vue Internally, it uses element-plus.

The correspondence between tags and components is as follows: https://github.com/dash14/v-network-graph-docs/blob/main/docs/.vitepress/theme/index.js

I hope this helps you. Best Regards,

[happylilem]

Thank you so much for directing me to these links, they are very helpful!

However, when I tried to get NodeConfigPanel.vue to work in my project, there occurred "Unexpected mutation" errors for each of the props (a total of 9 errors). I read this VueJS document about mutation, where it said to compute the prop. But in NodeConfigPanel.vue the props have been computed with getter and setter, and they're emitted as well.

I'm confused about what might be the cause of these errors because I suppose the exactly same code works well on your end. Any idea would be appreciated!

[dash14]

Is the problem you are facing now not a runtime error but a type checking error? As you may have noticed, props are converted to computed in setup(). However, it seems that the type checker (ESLint) does not recognize the conversion and interprets it as props being used directly and reports errors. I think it is fine in execution, so try the following statement in the first line of NodeConfigPanel.vue.

<!-- eslint-disable vue/no-mutating-props -->

Note that NodeConfigPanel.vue is a simplified implementation of a demonstration component and does not be implemented with strict type definition. In the above we have addressed this by ignoring it, but in practice it is better to take measures for type consistency. However, that is a general discussion for TypeScript and Vue, which are out of scope of this library....

Best Regards,

[happylilem]

Thank you for this detailed reply! The statement works, and I'll learn about type consistency, thank you!