TypeScript默认导出遇require未定义错误，如何正确创建默认导出？

1. 调整TypeScript编译配置（tsconfig.json） #

问题根源是TS默认生成了依赖require的CommonJS格式代码，浏览器原生不支持。需要把模块输出格式改成浏览器兼容的类型：

{
  "compilerOptions": {
    "module": "ESNext", // 或ES6、System，优先选ESNext
    "moduleResolution": "NodeNext",
    "target": "ES6",
    "esModuleInterop": true, // 开启后会自动处理默认导出的兼容逻辑，避免生成__importDefault
    "outDir": "./dist"
  }
}

2. 正确编写默认导出与导入 #

导出模块（ExampleModule.ts） #

// 直接默认导出类/对象
export default class Example {
  sayHello() {
    console.log("Hello");
  }
}

// 或者先定义再导出
const utils = {
  formatText: (text: string) => text.toUpperCase()
};
export default utils;

导入模块（主文件） #

// ES模块标准语法导入默认导出
import Example from "./ExampleModule";

const instance = new Example();
instance.sayHello();

3. 浏览器中正确加载脚本 #

编译后，HTML引入脚本时必须添加type="module"，告知浏览器这是ES模块：

<script type="module" src="./dist/main.js"></script>

这种方式不需要依赖第三方模块加载器，浏览器原生支持ES模块的导入导出逻辑。

4. RequireJS方案的问题说明 #

RequireJS遵循AMD规范，和TS默认生成的CommonJS代码不兼容。如果一定要用RequireJS，需修改tsconfig.json的module为AMD，同时改用异步加载语法：

// RequireJS异步导入方式
require(["ExampleModule"], function(Example) {
  const instance = new Example();
  instance.sayHello();
});

但这种写法不如原生ES模块简洁，推荐优先使用ES模块方案。

总结 #

核心是通过修改TS编译配置生成浏览器兼容的ES模块代码，配合type="module"脚本标签，就能彻底解决require未定义的问题，正常使用默认导出功能。

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