TypeScript报错：Module does not provide an export named 'default' 求解

问题详情 #

开发控制台报错：

app.ts:21 Uncaught SyntaxError: The requested module '/resources/js/plugins/register-global-components.js' does not provide an export named 'default'

执行npm run build构建项目时同样报错：

Error: 'default' is not exported by resources/js/plugins/register-global-components.js, imported by resources/js/app.ts

我的register-global-components.ts代码：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import type { App } from 'vue'

export default function registerGlobalComponents (app: App): void {
    app.component('font-awesome-icon', FontAwesomeIcon)
}

该文件编译后生成的register-global-components.js代码：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vue_fontawesome_1 = require("@fortawesome/vue-fontawesome");
function registerGlobalComponents(app) {
    app.component('font-awesome-icon', vue_fontawesome_1.FontAwesomeIcon);
}
exports.default = registerGlobalComponents;

app.ts中的导入语句：

...

import registerGlobalComponents from './plugins/register-global-components'

项目tsconfig.json配置：

{
    "compilerOptions": {
        // project options
        "lib": [
            "ESNext",
            "dom"
        ], // 指定要使用的默认类型定义集合（如"DOM"、"ES6"等）
        "outDir": "lib", // .js及.d.ts、.js.map等文件将输出到此目录
        "removeComments": true, // 转换为JavaScript时移除TypeScript文件中的所有注释，节省空间
        "target": "ES6", // 目标环境，多数现代浏览器支持ES6，可按需设置更高或更低版本（默认ES3）

        // Module resolution
        "baseUrl": "./", // 设置解析非绝对模块名称的基础目录
        "esModuleInterop": true, // 修复TypeScript最初与ES6规范的兼容问题，使TS将CommonJS/AMD/UMD模块视为ES6模块
        "moduleResolution": "node", // 现代JS基本使用node模式，另一个选项是"classic"
        "paths": {}, // 一系列重映射导入路径的配置项，相对于baseUrl

        // Source Map
        "sourceMap": true, // 启用source map以支持调试器和错误报告等
        "sourceRoot": "/", // 指定调试器查找TypeScript文件的位置，替代相对源位置

        // Strict Checks
        "alwaysStrict": true, // 确保文件以ECMAScript严格模式解析，并为每个源文件输出"use strict"
        "allowUnreachableCode": false, // 检测死代码路径
        "noImplicitAny": true, // 当无法推断类型且无类型注解时，TS不会将变量类型 fallback 为any
        "strictNullChecks": true, // 启用后null和undefined有独立类型，在需要具体值的位置使用会触发类型错误

        // Linter Checks
        "noImplicitReturns": true,
        "noUncheckedIndexedAccess": true, // 访问索引时必须检查是否为undefined
        "noUnusedLocals": true, // 报告未使用的局部变量错误
        "noUnusedParameters": true // 报告函数中未使用的参数错误
    },
    "include": ["./**/*.ts"],
    "exclude": [
        "node_modules/**/*"
    ]
}

vite.config.js配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import ElementPlus from 'unplugin-element-plus/vite';


export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.ts',
            ]
        }),
        ElementPlus({
            // options
        }),
    ],
});

已尝试的解决方法 #

给导入路径加上.ts后缀（import registerGlobalComponents from './plugins/register-global-components.ts'）能解决报错，但会触发TypeScript错误：TS2691: An import path cannot end with a '.ts' extension.，这显然不是正确的解决方式。

查过相关资料后确认import和export的写法没问题，现在需要正确的解决思路和方案。

解决思路与方案 #

1. 配置Vite的扩展名解析规则 #

在vite.config.js中添加resolve.extensions配置，明确指定Vite优先解析的文件扩展名，确保它能正确找到.ts源文件：

export default defineConfig({
  // ...其他现有配置
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
  },
});

2. 显式设置TypeScript的模块格式 #

在tsconfig.json的compilerOptions中添加module配置，确保输出的模块格式与Vite的处理逻辑兼容：

{
  "compilerOptions": {
    // ...其他现有配置
    "module": "ESNext"
  }
}

3. 清理旧编译产物 #

你的tsconfig.json设置了outDir: "lib"，但Vite开发模式会直接编译源码到内存，不会使用lib目录的文件。如果lib目录存在旧的编译产物，可能导致Vite错误加载。删除lib目录后重新运行项目即可。

4. 切换为命名导出（备选兼容方案） #

如果上述方法无效，可以将默认导出改为命名导出，避免CommonJS与ES模块之间的默认导出兼容问题：
修改register-global-components.ts：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import type { App } from 'vue'

export function registerGlobalComponents (app: App): void {
    app.component('font-awesome-icon', FontAwesomeIcon)
}

修改app.ts中的导入语句：

import { registerGlobalComponents } from './plugins/register-global-components'

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