Constructing "Vue" will crash at run-time because it's an import namespace object, not a constructor

[Arwin]

Hi,

I'm unable to build our Vue3 application. I'm getting this error message:

 warnings: [

    {

      detail: undefined,

      id: 'call-import-namespace',

      location: {

        column: 42,

        file: 'node_modules/@syncfusion/ej2-vue-base/src/template.js',

        length: 3,

        line: 102,

        lineText: ' var vueTemplate = new Vue({',

        namespace: '',

        suggestion: ''

      },

      notes: [

        {

          location: {

            column: 7,

            file: 'node_modules/@syncfusion/ej2-vue-base/src/template.js',

            length: 8,

            line: 1,

            lineText: "import * as Vue from 'vue';",

            namespace: '',

            suggestion: 'Vue'

          },

          text: 'Consider changing "Vue" to a default import instead:'

        }

      ],

      pluginName: '',

      text: `Constructing "Vue" will crash at run-time because it's an import namespace object, not a constructor`

    }

  ]

My Dependencies:

"dependencies": {
    "@syncfusion/ej2-vue-calendars": "20.4.44",
    "@syncfusion/ej2-vue-schedule": "20.4.44",
    "vue": "^3.2.0",

[Satheesh Kumar Balasubramanian]

Hi Arwin,

We checked your reported problem at our end, and it works as expected. Please check our shared sample and if you are still facing the same issue, share the below details to proceed further.

• Replicate the issue in our shared sample or
• Share issue reproducing sample.

Regards,

Satheesh Kumar B

Attachment: schedulevue3_b5cf8430.zip

[Arwin]

Hi Satheesh,

We are using Vite to build our application.

[Vijay Ravi]

 

Hi Arwin,

We prepared a sample in our end using vite. It's rendered as expected. Share the information below if you're still having trouble.

• Provide a sample that reproduces the issue or
• Reproduce the issue in our shared sample.

Regards,

Vijay Ravi

Attachment: vue_vite_9d3d93a3.zip

[Arwin]

Hi Vijay,

Thx, i got the scheduler running in vue3 but de events won't render.

I get this error in onActionFailure:

 TypeError: Cannot read properties of undefined (reading 'components')

Attachment: EJS_scheduler_error.png_e86b4c0e.zip

[Arwin]

The problem comes from using a :event-template on the e-view

template.js:60 Uncaught TypeError: Cannot read properties of undefined (reading 'components')

    at template.js:60:64

    at template-engine.js:31:22

    at MonthEvent2.createAppointmentElement (month.js:408:66)

    at MonthEvent2.renderEvents (month.js:517:47)

    at MonthEvent2.renderEventsHandler (month.js:206:22)

    at MonthEvent2.renderAppointments (month.js:112:18)

    at Month2.onDataReady (month.js:50:25)

    at Observer2.notify (observer.js:101:29)

    at Component2.notify (component.js:286:32)

    at Crud2.refreshProcessedData (crud.js:93:21)

[Vijay Ravi]

Hi Arwin

We checked your reported error in our shared sample and with the eventTemplate for week and month view and the issue not be reproduced on our end. So we suggest you check our shared sample and if you still facing the same problem share the below details for further investigation.

• Replicate the issue in our shared sample or
• Issue reproducing sample(if possible) or
• Entire Schedule-related code snippets.

Regards,

Vijay Ravi

Attachment: vue_vite_project_cc7014ec.zip

[Arwin]

Hi Vijay,

We are using the event-tempate syntax

<e-views>
    <e-view :event-template="week_template" option="Week" />
    <e-view :event-template="month_template" option="Month" />
</e-views>
​

data() {
    return {
        week_template: function(e) {
            return {
                template: WeekEvent
            }
        },
        month_template: function(e) {
            return {
                template: MonthEvent
            }
        }
},

If I include the template directly like in your example it works correctl

<e-view option="Week">
    <template #weekTemplate="{ data }">
        <week-event :data="data" />
    </template>
</e-view>

Hope your can fix the other way 

[Vijay Ravi]

Hi Arwin

We prepared a sample based on your shared Schedule code snippet at our end. But, we are unable to reproduce the issue. Refer to the below-shared code snippet. If you still facing the issue share the below information.

• Reproduce the issue in our shared sample or
• Share an issue reproducing the sample or
• Entire Schedule-related code snippets.

[app.vue]

<script>

const app = createApp();

var instance = new Internationalization();

var WeekEvent = app.component("week_Template", {

  template:

    "<div class='template-wrap'><div>Subject: {{data.Subject}}</div>" +

    "<div >StartTime: {{getDateTimeText(data.StartTime)}}</div>" +

    "<div>EndTime: {{getDateTimeText(data.EndTime)}}</div></div>",

  data: () => ({}),

  methods: {

    getDateTimeText: function(value) {

      return instance.formatDate(value, {

        type: "dateTime",

        skeleton: "medium"

      });

    }

  }

});

var MonthEvent = app.component("month_Template", {

  template:

    "<div class='template-wrap'><div>Subject: {{data.Subject}} </div></div>",

  data: () => ({}),

});

 

 

// Component registration

export default {

  name: "App",

  // Declaring component and its directives

  components: {

    'ejs-schedule': ScheduleComponent,

    'e-views': ViewsDirective,

    'e-view': ViewDirective,

  },

  // Bound properties declarations

  data() {

    return {

      selectedDate: new Date(2021, 7, 12),

      week_Template: function() {

        return { template: WeekEvent };

      },

      month_Template: function() {

        return { template: MonthEvent };

      }   

    };

  },

};

</script>

<template>

  <div id='app'>

    <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>

      <e-views>

        <e-view option="Week" :event-template="week_Template"></e-view>

        <e-view option="Month" :event-template="month_Template"></e-view>

      </e-views>

    </ejs-schedule>

  </div>

</template>

Output screenshot: 

Regards,

Vijay Ravi

Attachment: vue3_sample_6976f6e1.zip