The requested module 500 The requested module @syncfusion_ej2-vue-schedule.js

[Luca Tosetti]

500

The requested module '/_nuxt/node_modules/.cache/vite/client/deps/@syncfusion_ej2-vue-schedule.js?v=e4fbbc60' does not provide an export named 'Day'

this is ma config.

 "packages": {

    "": {

      "name": "nuxt-app",

      "hasInstallScript": true,

      "dependencies": {

        "@nuxtjs/strapi": "^1.12.0",

        "@syncfusion/ej2": "^26.2.7",

        "@syncfusion/ej2-base": "^26.2.5",

        "@syncfusion/ej2-grids": "^26.2.7",

        "@syncfusion/ej2-vue-buttons": "^26.2.7",

        "@syncfusion/ej2-vue-grids": "^26.2.7",

        "@syncfusion/ej2-vue-navigations": "^26.2.7",

        "@syncfusion/ej2-vue-schedule": "^26.2.7",

        "axios": "^1.7.2",

        "bootstrap": "^5.3.3",

        "nuxt": "^3.12.4",

        "popper.js": "^1.16.1",

        "vue": "latest"

      }

    },

error in this component

export default {

  components: {

    'ejs-schedule': ScheduleComponent

  },

  data() {

    return {

      selectedDate: new Date(2018, 1, 15),

      eventSettings: {

        dataSource: data,

        fields: {

          id: 'Id',

          subject: { name: 'EventName' },

          isAllDay: { name: 'IsAllDay' },

          startTime: { name: 'StartTime' },

          endTime: { name: 'EndTime' }

        }

      }

    };

  },

  provide: {

    schedule: [Day, Week, WorkWeek, Month]

  }

};

</script>

<style>

  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

  @import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css';

</style>

[Swathi Ravi]

Hi Luca,

Thank you for reaching out.

Based on your details we confirm that you are using the Vue Nuxt3 application. And would like to inform you that the cause of the issue is providing  transpile: ['@syncfusion'] in the nuxt.config file.

The below nuxt config is added for transpiling Syncfusion packages to use on the CommonJS server for development and production mode.

 

build: {

    transpile: ['@syncfusion']

  }

 

In recent days, Nuxt framework had made some changes in transpile config, so the above configuration does not works in development mode.

 

Without above configuration, the below error will be thrown in production mode:

 

[nuxt] [request error] [unhandled] [500] Named export 'Day' not found. The requested module '@syncfusion/ej2-vue-schedule' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using:

import pkg from '@syncfusion/ej2-vue-schedule';

const { Day, Week, WorkWeek, Month, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective } = pkg;

 

The cause of the issue in development mode is the usage of a string data type in the transpile configuration, which does not compile sub-dependencies. To resolve this issue, we need to use regex to compile the dependencies.

 

build: {

    transpile: [/@syncfusion/]

  }

 

Kindly modify the configuration to resolve the issue, and we will also update these details in our documentation.

Regards,

Swathi

[Luca Tosetti]

SOLVED 

Thankyou Very much

Best regard Luca

[Swathi Ravi]

Luca, 

We are glad to hear that our provided solution has been worked for you. Get back to us if you need any further assistance.