使用Yarn Berry+Vite配置React应用时VSCode模块找不到问题求助

可行修复方案： #

1. 强制重新生成Yarn SDK配置 #

执行命令强制覆盖现有VSCode SDK关联，确保TypeScript 5与Yarn Berry的解析逻辑完全匹配：

yarn dlx @yarnpkg/sdks vscode --force

2. 手动指定VSCode的TypeScript工作区路径 #

在项目根目录的.vscode/settings.json中添加以下配置，明确指向Yarn管理的TypeScript版本：

{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

保存后重启VSCode，确保编辑器加载的是工作区专属的TS版本。

3. 调整TypeScript配置适配ES模块解析 #

在tsconfig.json的compilerOptions中更新模块解析相关配置，适配TS 5和Vite的构建逻辑：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    // 保留原有其他配置
  }
}

TS 5对模块解析的默认规则有调整，bundler模式更适配Vite这类工具，同时兼容Yarn Berry的PnP机制。

4. 清除缓存并重新安装依赖 #

旧缓存可能导致TS 5解析异常，执行以下命令重置依赖环境：

yarn cache clean
yarn install

5. 禁用VSCode内置TypeScript扩展（可选） #

如果上述方法无效，可尝试仅保留Yarn提供的TS支持：

• 打开VSCode扩展面板，搜索「TypeScript and JavaScript Language Features」
• 选择「禁用（工作区）」
• 重启VSCode后重新关联工作区TS版本

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