1. Home
  2. Forum
  3. Vue
  4. SyntaxError Named export BreadcrumbComponent not found

SyntaxError Named export BreadcrumbComponent not found

[Vue Router warn]: uncaught error during route navigation:
file:///vv/.output/server/chunks/app/_nuxt/SyncBreadcrumb-d3859186.mjs:3
import { BreadcrumbComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-vue-navigations';
         ^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'BreadcrumbComponent' not found. The requested module '@syncfusion/ej2-vue-navigations' 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-navigations';
const { BreadcrumbComponent, ItemsDirective, ItemDirective } = pkg;


    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async setup (file:///xxx/.output/server/chunks/app/server.mjs:1231:76)
    at async Object.callAsync (file:///xxx/.output/server/chunks/nitro/node-server.mjs:5911:16)
    at async applyPlugin (file:///xxx/.output/server/chunks/app/server.mjs:129:35)
    at async applyPlugins (file:///xxx/.output/server/chunks/app/server.mjs:149:7)
    at async createNuxtAppServer (file:///xxx/.output/server/chunks/app/server.mjs:2576:7)
    at async Object.renderToString (file:///xxx/.output/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)

    at async file:///xxx/.output/server/chunks/handlers/renderer.mjs:217:21

Info:
Nuxt 3.8.2

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


5 Replies
KV Keerthikaran Venkatachalam Syncfusion Team December 15, 2023 04:42 PM UTC

Hi Dzul Qurnain,


We have checked your reported query and attempted to replicate the issue on our end, but were unable to do so. We have prepared the sample based on your provided details. I have attached the sample for reference.


Sample link: https://stackblitz.com/edit/tvom3q-jd84uv?file=src%2FApp.vue


For further validation, could you please share the issue's replicable working sample or replicate the issue in our sample with replication steps and a video demonstration? and which package version you are using in your project. Based on that, we will check and provide you with a better solution quickly.


Please let us know if you need any further assistance on this.


Regards,

KeerthiKaran K V


DQ Dzul Qurnain December 15, 2023 05:03 PM UTC

hello, i am using nuxt 3.8.2 and using composition API.


KV Keerthikaran Venkatachalam Syncfusion Team December 19, 2023 04:59 PM UTC

Hi Dzul,


We suspect that this issue may also occur due to the duplicate packages installed in your application. Follow the below steps to resolve the issue. 

  • Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.


  • Clear the npm .cache file, which will be created inside the node_modules folder.


  • Update our packages to the same major version. For example, if you are using a version like (i.e., v23.1.XX), use the same version for all the Syncfusion components in the package.json file.


  • Run the ‘’npm install” command to install the node_modules.



If you are still facing issues, could you please share the issue's replicable sample or replicate the issue in our sample with replication steps and a video demonstration? Based on that, we will check and pro-vide you with a better solution quickly.



Regards,

KeerthiKaran K V


Attachment: Vue_fbe358c0.zip

MK Michael Kriese March 20, 2024 11:56 AM UTC

I'm seeing a similar issue on almost all `@syncfusion/ej2-` packages.


The problem is that those packages have the `module` field set to esm js files in `package.json`, but don't use `type=module`. Alternatively those esm files should simply get `mjs` file extension.




KV Keerthikaran Venkatachalam Syncfusion Team March 21, 2024 01:55 PM UTC

Hi Michael,


We have validated the query, and we would like to inform you that Syncfusion packages utilize the ESM syntax, while Nuxt apps operate with the common JS syntax. To enable transpilation of Syncfusion packages, include the following configuration in the nuxt.config.ts file:

export default defineNuxtConfig({

  build: {

    transpile: ['@syncfusion']

  }

})


To assist you further, we have prepared a sample application with enabled Nuxt 3 configurations. I have attached the sample and UG link for reference.


UG link: https://ej2.syncfusion.com/vue/documentation/getting-started/nuxt-3#configure-transpilation-for-syncfusion-packages


Please let us know if you need any further assistance on this.


Regards,

KeerthiKaran K V


Attachment: VueSample_18ea7f37.zip

Loader.
Up arrow icon