@vitejs/plugin-react: 导入报错 TS2307 问题处理

处理一个 ts 报错问题

安装

pnpm add -D @vitejs/plugin-react

错误现场

处理办法

{
  "compilerOptions": {
     "moduleResolution": "bundler"
  }
}

为什么

• 你的导入是“非相对导入”（non-relative import）
• 根本原因: @vitejs/plugin-react 没有 main 导出，如果使用 node/node16 都不能正确找到
• 特别是 monorepo 会各种改写路径，导致 ts 报错

1. 你的导入是“非相对导入”（non-relative import）

import react from '@vitejs/plugin-react'; // ← 以 `@` 开头，是非相对导入
TypeScript 对这类导入的解析 高度依赖 moduleResolution 策略。

2. 在 moduleResolution: "node16"（或 "node"）下：
TS 会严格按照 Node.js 的模块解析算法 去找包；
它期望在 node_modules 中找到 符合 ESM/CJS 条件的入口文件（比如 package.json#exports 中的 import/require 字段）；
如果包的 package.json 没有正确声明 exports，或者 TS 无法匹配到有效的子路径，就会报 TS2307。
✅ @vitejs/plugin-react@5.x 的 package.json 是这样：

{
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    }
  }
}
理论上没问题，但在某些 TS 配置或 monorepo 结构下（如 pnpm + workspaces），"node16" 模式可能无法正确解析 exports 中的 . 入口，尤其当项目根路径和包路径有嵌套时。

3. 在 moduleResolution: "bundler" 下：
TypeScript 不再严格遵循 Node.js 的 exports 规则；
它采用 更宽松、更贴近 Vite/Webpack 的解析逻辑：
首先看 package.json#types 或 main/module；
如果存在 node_modules/@vitejs/plugin-react 目录，就直接尝试加载 dist/index.d.ts（即使 exports 存在）；
对 exports 的处理更容错，优先保证“能导入”。
💡 所以："bundler" 模式 降低了对 package.json#exports 完整性的要求，对现代前端工具链更友好。