tower1229 / Vue-Tree-Chart

A Vue component to display tree chart

Home Page:https://refined-x.com/Vue-Tree-Chart/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot read properties of undefined (reading '_c')

sylvesterdas opened this issue · comments

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/vue-tree-chart@1.2.9/node_modules/vue-tree-chart/dist/TreeChart.common.js:1401:26)
    at renderComponentRoot (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:537:38)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4208:46)
    at ReactiveEffect.run (webpack-internal:///./node_modules/.pnpm/@vue+reactivity@3.2.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:191:21)
    at setupRenderEffect (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4334:5)
    at mountComponent (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4116:5)
    at processComponent (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4075:9)
    at patch (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3690:11)
    at mountChildren (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3872:7)
    at mountElement (webpack-internal:///./node_modules/.pnpm/@vue+runtime-core@3.2.13/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.