如何解决TypeScript导入中的Uncaught SyntaxError: ambiguous indirect export错误

我的TypeScript代码可正常编译，但生成的main.js中以下导入语句会触发**"ambiguous indirect export"**错误：

import { Pbf } from "../../node_modules/pbf/dist/pbf.js";
import { Market } from "./pbfmarket.js";

目前只能通过以下方式绕开：在引用main.js的HTML中手动添加全局脚本引入，并注释掉main.js里的导入语句，代码才能正常运行：

<script>var exports = {};</script>
<script src="/node_modules/pbf/dist/pbf.js"></script>
<script src="/dist/proto/pbfmarket.js"></script>
<script type="module" src="/dist/proto/main.js"></script>

编译后被注释的代码如下：

// !! manual imported in proto/custom.html
// import { Pbf } from "../../node_modules/pbf/dist/pbf.js";
// import { Market } from "./pbfmarket.js";
// above two lines should be commented out.
// due to some javascript error.

我的tsconfig.json配置：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "esnext",
    "allowJs": true,
    "moduleResolution": "node",
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "downlevelIteration": true,
    "sourceMap": true,
    "typeRoots": ["node_modules/@types", "@types"],
    "outDir": "./dist",
    "baseUrl": "./src"
  },
  "include": [
    "src",
    "src/**/*.js",
    "types"
  ]
}

需要补充哪些知识或配置，才能让TypeScript代码无需手动注释导入语句、无需在HTML中手动引入文件即可编译运行？

1. 错误根源 #

"ambiguous indirect export"错误本质是：你导入的模块（比如pbf.js）是UMD/CommonJS格式，而非标准ES模块，浏览器原生ES模块解析器无法识别其导出逻辑，导致冲突。

2. 具体修复步骤 #

（1）修正第三方库导入路径 #

不要直接导入node_modules下的具体文件，而是导入包的官方入口，让TypeScript自动处理模块解析：

// 替换原导入语句
import { Pbf } from 'pbf';

这样TS会读取pbf包的package.json，优先选择其声明的ES模块入口（若存在）。

（2）确保自定义模块为ES格式 #

检查pbfmarket.ts的导出语法，必须使用ES模块规范：

// 正确的ES模块导出示例
export class Market {
  // 你的业务代码
}

如果是protobuf生成的代码，需要在生成时指定输出ES模块格式（比如protoc的--es_out参数）。

（3）引入模块打包工具（核心解决方案） #

浏览器原生ES模块无法直接处理node_modules中的非ES模块依赖，必须用打包工具统一转换格式、处理路径：
推荐用Vite（轻量化）或Webpack（全功能），以Vite为例：

• 安装依赖：npm install vite --save-dev
• 创建vite.config.ts：

import { defineConfig } from 'vite';

export default defineConfig({
  root: './src', // 源码根目录
  build: {
    outDir: '../dist', // 输出目录与TS配置一致
    emptyOutDir: true
  }
});

• 修改package.json脚本：

{
  "scripts": {
    "build": "tsc && vite build", // 先编译TS，再用Vite打包
    "dev": "vite" // 开发环境热更新
  }
}

• 运行npm run build后，HTML只需引入打包后的模块：

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

（4）调整TS配置适配浏览器 #

如果暂时不想用打包工具，可修改tsconfig.json优化模块解析：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020", // 降低到浏览器广泛支持的版本
    "allowJs": true,
    "moduleResolution": "bundler", // 适配打包器的解析逻辑
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "downlevelIteration": true,
    "sourceMap": true,
    "typeRoots": ["node_modules/@types", "@types"],
    "outDir": "./dist",
    "baseUrl": "./src",
    "paths": {
      // 强制指定pbf的ES模块入口（若pbf提供）
      "pbf": ["../node_modules/pbf/dist/pbf.esm.js"]
    }
  },
  "include": [
    "src",
    "src/**/*.js",
    "types"
  ]
}

（5）验证第三方模块的ES入口 #

查看pbf包的package.json，确认是否存在module字段（指向ES模块文件），如果有，直接import { Pbf } from 'pbf'即可正常识别；若没有，必须用打包工具转换格式。

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