Vue3 - How to add :content as a chart in panel in a dashboardlayout component within a sub page

[Craig Stock]

Hi, 
Apologies in advance if I'm showing my ignorance on how to work with Vue 3 and the SyncFusion Vue library but I'm struggling to understand how I can insert a chart into a panel in a dashboardlayout in a sub-page.

I was kindly sent an example of a piechart component, activeVistorTemplate, that's used in the e-panel e.g. :content="visitor" that is working see below: 

<e-panel :sizeX="2" :sizeY="4" :row="1" :col="0" header="<div>Active Visitors</div> " :content="visitor"></e-panel> 
​

import activeVisitorTemplate from "./activeVisitors.vue";

import { createApp } from "vue";

const app = createApp({
  // Displays "Hello, World" initially, changes based on input
  template: '<hello></hello>'
});

...

visitor: function() {
  return { template : activeTemplate }   
},

Copying the working code into my own example component/project: 

const app = createApp({
   template: '<hello></hello>'
});

var activeTemplate = app.component("visitor", {
  template: '<activeVisitorTemplate></activeVisitorTemplate>',
  components: {
    "activeVisitorTemplate": activeVisitorTemplate,
  },
  data() {
    return {
      data: {}
    };
  }
});

I'm getting the following error, see below, as a result of the app.component call. I'm not sure what to do to resolve this. I've successfully got the e-panels rendering successfully up until this point I'm just stuck getting content into them. 

component-base.js?5880:9 Uncaught TypeError: Object prototype may only be an Object or null: undefined

    at setPrototypeOf (<anonymous>)

    at extendStatics (component-base.js?5880:9)

    at __extends (component-base.js?5880:12)

    at eval (component-base.js?5880:49)

    at eval (component-base.js?5880:441)

    at Module../node_modules/@syncfusion/ej2-vue-charts/node_modules/@syncfusion/ej2-vue-base/src/component-base.js (chunk-vendors.js:5927)

    at __webpack_require__ (app.js:849)

    at fn (app.js:151)

    at eval (index.js?38cd:1)

    at Module../node_modules/@syncfusion/ej2-vue-charts/node_modules/@syncfusion/ej2-vue-base/src/index.js (chunk-vendors.js:5951)
----------------------------

Many thanks in advance if anyone would be kind enough to provide some guidance and or assistance on what to do/try next and what exactly this error means?

[Craig Stock]

Solved ... removed and rebuilt 'node_modules' dir!

[Keerthana Rajendran]

Hi Craig, 

 

Thanks for the update. We are happy to hear that the issue has been resolved. Please get back to us if you need any further assistance. We will be happy to assist you. 

 

Regards, 

Keerthana R.