Laravel11+Vue3构建Vue3EasyDataTable时TS1192无默认导出报错求助

我用 Laravel 11 + Vue 3 搭建了项目，引入 Vue3EasyDataTable 组件后开发环境功能正常，但执行 npm run build 构建时触发以下错误：

resources/js/app.ts:17:8 - error TS1192: Module "C:/xampp/htdocs/pflegedirekt_laravel/node_modules/vue3-easy-data-table/types/main" has no default export.
17 import Vue3EasyDataTable from 'vue3-easy-data-table';

之前在 GitHub 找到同类问题的解决方案——在 tsconfig.json 中添加 "allowSyntheticDefaultImports": true,，但该方案对我的项目无效，求可行解决办法。

app.ts 代码如下：

import './bootstrap';
import '../css/app.css';

import { createApp, h, DefineComponent } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

// import VueDatePicker from '@vuepic/vue-datepicker';
// import '@vuepic/vue-datepicker/dist/main.css'

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

const appName = import.meta.env.VITE_APP_NAME || 'Pflegedirekt';

const vuetify = createVuetify({
    components,
    directives,
})

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(vuetify)
            .component('EasyDataTable', Vue3EasyDataTable)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Vue3EasyDataTable 的类型定义如下：

export type SortType = 'asc' | 'desc'

export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between'| 'in';

export type Item = Record<string, any>

export type FilterOption = {
  field: string
  comparison: 'between'
  criteria: [number, number]
} | {
  field: string
  comparison: '=' | '!='
  criteria: number | string
} | {
  field: string
  comparison: '>' | '>=' | '<' | '<='
  criteria: number
} | {
  field: number | string
  comparison: 'in'
  criteria: number[] | string[]
} | {
  field: string
  comparison: (value: any, criteria: string) => boolean
  criteria: string
}

export type Header = {
  text: string
  value: string
  sortable?: boolean
  fixed?: boolean
  width?: number
}

export type ServerOptions = {
  page: number
  rowsPerPage: number
  sortBy?: string | string[]
  sortType?: SortType | SortType[]
}

export type ClickRowArgument = Item & {
  isSelected?: boolean
  indexInCurrentPage?: number
}

export type UpdateSortArgument = {
  sortType: SortType | null
  sortBy: string
}

export type HeaderItemClassNameFunction = (header: Header, columnNumber: number) => string
export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string
export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string

export type TextDirection = 'center' | 'left' | 'right'

可行解决方案尝试 #

1. 改用命名导入

从类型定义可以看出，组件没有默认导出，直接替换导入方式：

// 替换原默认导入
import { Vue3EasyDataTable } from 'vue3-easy-data-table';

2. 完善 tsconfig.json 配置

除了 allowSyntheticDefaultImports，确保配置包含以下项：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node"
  }
}

3. 手动补充类型声明

如果上述方法无效，在项目根目录新建 types/vue3-easy-data-table.d.ts 文件，手动添加默认导出类型：

import { DefineComponent } from 'vue';

declare module 'vue3-easy-data-table' {
  const Vue3EasyDataTable: DefineComponent;
  export default Vue3EasyDataTable;
}

4. 调整组件版本

检查 vue3-easy-data-table 版本与 Vue3、TypeScript 的兼容性，尝试升级或降级：

# 升级到最新稳定版
npm install vue3-easy-data-table@latest

# 或降级到已知兼容版本，比如 1.5.40
npm install vue3-easy-data-table@1.5.40

内容的提问来源于stack exchange，提问作者wojtek1904