nuxt3 - No default export found in imported module "vue3-easy-data-table"

[amery]

I'm having a weird problem trying to add your component (1.5.27) to my pnpm/nuxt3 project

I created a dumb plugin, plugins/datatable.ts, as follows

import DataTable from "vue3-easy-data-table";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component("DataTable", DataTable);
});

but when started I get:

 ERROR
/home/xxx/src/plugins/datatable.ts
  1:8  error  No default export found in imported module "vue3-easy-data-table"  import/default

✖ 1 problem (1 error, 0 warnings)

I'm fairly new to the node.js world. Am I importing it incorrectly?

[amery]

it seems the import is actually pulling main.d.ts instead of index for some reason. I'm assuming this is caused by something on package.json but I don't know what to try

[frasza]

hmm I have it in such setup and works for me just fine

import Vue3EasyDataTable from 'vue3-easy-data-table'
import 'vue3-easy-data-table/dist/style.css'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.component('EasyDataTable', Vue3EasyDataTable)
})

[t10o]

I have confirmed the same error as well.

import Vue3EasyDataTable from 'vue3-easy-data-table'; // ESLint: No default export found in imported module "vue3-easy-data-table".(import/default)
import 'vue3-easy-data-table/dist/style.css';

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.component('EasyDataTable', Vue3EasyDataTable);
});

I'm fairly new to the node.js world too. But I think an error is occurring because the type information from index.ts is not present in main.d.ts.

If I am causing the error, could you please give me some hints on how to solve it?

[valdoryu]

Have you tried using the es module instead of the umd ?

import Vue3EasyDataTable from 'vue3-easy-data-table/dist/vue3-easy-data-table.es.js';

It may be the issue for some reason

[HC200ok]

Seems to be an eslint error.

What about this workaround:

import * as Vue3EasyDataTable from 'vue3-easy-data-table';

[suryaadtmaja]

Seems to be an eslint error.

What about this workaround:

import * as Vue3EasyDataTable from 'vue3-easy-data-table';

The error was fixed, but it gives another error or warning to the console.log

[suryaadtmaja]

Seems to be an eslint error.

What about this workaround:

import * as Vue3EasyDataTable from 'vue3-easy-data-table';

confirm, this solution is not working

import * as Vue3EasyDataTable from 'vue3-easy-data-table';

here's my sandbox, as i create this without an error, it looks like eslint error https://stackblitz.com/edit/github-wue6ul?file=package.json

Seems to be an eslint error.

What about this workaround:

import * as Vue3EasyDataTable from 'vue3-easy-data-table';

I have the same problem in my code because i use eslint, no idea how to fixed it at the moment.

[suryaadtmaja]

I found how to solve this, by adding "allowSyntheticDefaultImports": true to your tsconfig.json

"allowSyntheticDefaultImports": true,

https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports

[wkaczmarczyk92]

Hello, I have same problem when I try to build project (laravel 11 + vue3) with npm run build. I tried to add "allowSyntheticDefaultImports": true,

to tsconfig.json but it didnt work. Any other ideas how to fix this?