React库用vite-plugin-dts构建时遇Unexpected token '??='错误求助

错误根源 #

??= 是ES2020新增的逻辑空赋值运算符，你的配置中target设为ES6（ES2015），但构建过程中存在未被转译为ES6兼容语法的代码（可能来自依赖、插件内部逻辑或自身代码），导致语法解析失败。

分步修复 #

1. 修正TypeScript配置（tsconfig.json） #

你的typeRoots配置错误，它应该指向类型定义目录而非具体声明文件，同时调整声明生成相关配置：

{
  "compilerOptions": {
    "target": "ES6",
    "useDefineForClassFields": true,
    "lib": ["ES6", "DOM", "ES2021.String", "ES2017.Object"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true, // 让Vite/rollup处理编译，TS仅做类型检查
    "jsx": "react-jsx",
    "declaration": true,
    "typeRoots": ["node_modules/@types"], // 修正为正确的类型定义目录
    "declarationDir": "dist/types", // 可选：指定声明文件输出子目录

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "./index.ts"],
  "exclude": ["build", "node_modules", "dist"]
}

2. 调整Vite构建目标与插件配置（vite.config.ts） #

提高构建目标至支持??=的ES版本，同时优化vite-plugin-dts的输出配置：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from "vite-plugin-dts";

export default defineConfig({
  build: {
    target: "es2020", // 改为支持??=的ES版本，避免语法转译冲突
    lib: {
      entry: resolve(__dirname, 'src/Index.ts'),
      name: 'vite-react-app',
      fileName: (format) => (format === "umd" ? "index.umd.js" : "index.es.js"),
    },
    rollupOptions: {
      external: ['react', "react-dom"],
      output: {
        globals: {
          react: 'React',
          "react-dom": "ReactDOM"
        },
      },
    }
  },
  plugins: [
    react(),
    dts({
      outputDir: 'dist', // 指定声明文件输出到dist目录
      insertTypesEntry: true, // 自动生成index.d.ts入口文件
      cleanVueFileName: false // 非Vue项目可设为false
    })
  ]
});

3. 额外排查点 #

• 如果仍报错，检查项目依赖是否有使用ES2020+语法但未被转译的包，可在Vite配置中添加强制预构建：

  optimizeDeps: {
    include: ['出现问题的依赖包名']
  }
  

• 更新vite-plugin-dts到最新版本，避免插件自身的语法兼容问题。

验证修复 #

执行npm run build，检查：

• 终端是否无语法错误
• dist目录下是否生成了对应的.d.ts声明文件

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