Error on customizing FileManager with DetailsView and Toolbar in Nuxt

[Ali]

Hi, 

I'm using the FileManager-Component in my nuxt application and unable to customize via provide the FileManager e.g. with DetailsView. Everything works fine in a normal vue app. I got the following error for each component: 

The requested module '/_nuxt/node_modules/.cache/vite/client/deps/@syncfusion_ej2-vue-filemanager.js?v=7b77add7' does not provide an export named 'DetailsView'

Using:

<ejs-filemanager
  id="file-manager"
  :ajaxSettings="ajaxSettings"
  :beforeSend="beforeSend"
/>

Script: 

import{
  FileManagerComponent as EjsFilemanager,
  DetailsView,
  NavigationPane,
  Toolbar,
  type AjaxSettingsModel,
} from"@syncfusion/ej2-vue-filemanager";

const filemanager =[DetailsView,NavigationPane,Toolbar];
provide("filemanager", filemanager);

As I said,this code is working fine in vue but not in nuxt. 

I would appreciate any help.

Thanks, Ali

[Subalakshmi Ramachandran]

Hi Ali,

Greetings from Syncfusion support.

We have reviewed your query and understand that you are trying to render the FileManager with DetailsView and Toolbar in Nuxt. While trying to render the Filemanager, you got a error that you are unable to export the DetailsView from the modules. To resolve this error, you have to use the below code snippet in your sample and make sure that you are using the latest package version:

[app.vue] 

import { 

  FileManagerPlugin, 

  FileManagerComponent, 

  DetailsView, 

  NavigationPane, 

  Toolbar, 

} from

'@syncfusion/ej2-vue-filemanager';

 

Vue.component(FileManagerPlugin.name,

FileManagerComponent);

 

// In export use the below code for provide 

provide: { 

    filemanager: [NavigationPane,DetailsView,Toolbar], 

}

We have also attached a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/nuxt_filemanager_1-1299462789.zip

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suba R.

[Ali]

Hi Suba, 

thank you very much for the solution. I will check this. What I've found also is, I had transpile in nuxt config as described here https://ej2.syncfusion.com/vue/documentation/getting-started/nuxt-3 

export default defineNuxtConfig({ build: { transpile: ['@syncfusion'] } })

When I remove the "transpile" from nuxt config it will work as expected.

Regards,

Ali

[Shereen Shajahan]

Hi Ali,

Thank you for the suggestion. Please get back to us for assistance in the future.

Regards,

Shereen