从npm迁移到pnpm后react/jsx-runtime模块找不到的TypeScript问题

核心原因 #

React19已将react/jsx-runtime的类型声明整合到@types/react包中，但pnpm的严格依赖隔离机制，加上TypeScript模块解析配置未适配React19的导出结构，导致编辑器无法正确识别该模块的类型。

正规修复方案（不破坏pnpm依赖隔离） #

1. 修正tsconfig.json的编译器配置 #

确保compilerOptions符合Next.js+React19+pnpm的要求，关键配置如下：

{
  "extends": "next/core-web-vitals",
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolvePackageJsonExports": true,
    "resolvePackageJsonImports": true,
    "jsx": "react-jsx",
    "types": ["react", "react-dom"],
    "skipLibCheck": true
  }
}

• moduleResolution: "bundler"：适配Next.js打包器的模块解析逻辑，比node16更兼容React19的导出
• jsx: "react-jsx"：启用React自动导入jsx-runtime的模式，无需手动引入
• skipLibCheck: true：避免第三方库类型冲突干扰（可选，但能减少无关报错）

2. 确保@types/react为项目直接依赖 #

pnpm不会自动提升peer依赖，需手动将匹配版本的类型包安装为开发依赖：

pnpm add -D @types/react@19.2.17 @types/react-dom@19.2.17

注意版本必须与react、react-dom的版本完全匹配，避免类型不兼容。

3. 重置VS Code的TypeScript环境 #

• 打开命令面板（Ctrl/Command+Shift+P），执行TypeScript: Select TypeScript Version，选择项目本地的node_modules/typescript版本（而非VS Code内置版本）
• 再次执行TypeScript: Restart TS Server，确保编辑器加载最新的依赖类型

4. 清理Next.js缓存与依赖残留 #

执行以下命令彻底清理后重装依赖：

rm -rf .next node_modules pnpm-lock.yaml
pnpm install
pnpm dev

验证方法 #

1. 检查node_modules/react目录下是否存在jsx-runtime文件夹
2. 查看node_modules/@types/react/jsx-runtime.d.ts文件是否存在，确认类型声明已正确安装
3. 打开任意.tsx文件，检查编辑器是否仍有无法找到'react/jsx-runtime'模块的报错

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