Typescript React项目使用esbuild构建后导入无default导出问题问询

问题原因 #

你的esbuild构建命令未指定输出格式为ES模块，打包后的产物默认不会暴露源代码中的default导出，因此引入时触发找不到导出的报错。

解决方案 #

按以下步骤修改即可：

• 更新package.json中的build-test构建命令，新增ES模块输出配置，若你计划发布为npm包，建议同时将react、react-dom标记为外部依赖避免重复打包：

"build-test": "esbuild src/App.tsx --bundle --minify --format=esm --external:react --external:react-dom --outfile=src/dist/index.js",

• 重新执行构建命令，此时打包后的src/dist/index.js会自动保留export default导出语句
• 重启项目运行即可正常引入组件

临时验证方案 #

如果不想修改构建配置，可临时修改引入写法适配CommonJS格式的打包产物：

import * as AppModule from "./dist/index.js";
const App = AppModule.default;

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