Vue-Tree-Chart
Vue-Tree-Chart copied to clipboard
Cannot read properties of undefined (reading '_c')
Uncaught runtime errors:
### ERROR
Cannot read properties of undefined (reading '_c')
TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/vue-tree-chart/dist/TreeChart.common.js:1401:26)
at renderComponentRoot (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:537:38)
at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4208:46)
at ReactiveEffect.run (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:191:21)
at setupRenderEffect (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4334:5)
at mountComponent (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4116:5)
at processComponent (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4075:9)
at patch (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3690:11)
at mountChildren (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3872:7)
at mountElement (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3790:9)
Vue File
<template>
<div>
<TreeChart :json="treeData"></TreeChart>
</div>
</template>
<script>
import TreeChart from 'vue-tree-chart'
export default {
name: 'DependencyGraph',
components: {
TreeChart
},
data() {
return {
treeData: {
name: 'root',
image_url: 'https://static.refined-x.com/avat.jpg',
class: ['rootNode'],
children: [
{
name: 'children1',
image_url: 'https://static.refined-x.com/avat1.jpg'
},
{
name: 'children2',
image_url: 'https://static.refined-x.com/avat2.jpg',
mate: [{
name: 'mate',
image_url: 'https://static.refined-x.com/avat3.jpg'
}],
children: [
{
name: 'grandchild',
image_url: 'https://static.refined-x.com/avat.jpg'
},
{
name: 'grandchild2',
image_url: 'https://static.refined-x.com/avat1.jpg'
},
{
name: 'grandchild3',
image_url: 'https://static.refined-x.com/avat2.jpg'
}
]
},
{
name: 'children3',
image_url: 'https://static.refined-x.com/avat.jpg'
}
]
}
}
}
}
</script>
<style></style>
Additional Information
package.json
{
"dependencies": {
"@headlessui/vue": "^1.7.13",
"@popperjs/core": "2.9.1",
"@syncfusion/ej2-vue-richtexteditor": "^21.1.41",
"@vueup/vue-quill": "^1.1.1",
"axios": "^1.2.3",
"core-js": "^3.8.3",
"export-from-json": "^1.7.2",
"jsontoxml": "^1.0.1",
"lodash": "^4.17.21",
"marked": "^4.2.12",
"moment": "^2.29.4",
"pnpm": "^7.27.0",
"sanitize-html": "^2.11.0",
"vue": "^3.2.13",
"vue-axios": "^3.5.2",
"vue-inline-svg": "^3.1.2",
"vue-lodash": "^2.1.2",
"vue-router": "^4.0.3",
"vue-showdown": "^4.0.0",
"vue-tree-chart": "^1.2.9",
"vue3-datepicker": "^0.3.4",
"vuex": "^4.0.0",
"vuex-persistedstate": "^4.1.0",
"yaml": "^2.2.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.21.3",
"@types/jsontoxml": "^1.0.3",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.37.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"husky": "^8.0.3",
"lint-staged": "^13.0.2",
"postcss": "^8.4.21",
"prettier": "^2.8.1",
"pretty-quick": "^3.1.3",
"tailwindcss": "^3.3.1"
}
}
Let me know if you need more info.