React Vite项目vite.config.ts中path模块类型声明缺失问题排查

步骤1：安装Node.js类型声明包 #

path是Node.js内置模块，TypeScript需要对应的类型定义才能识别，直接安装开发依赖：

pnpm add -D @types/node

步骤2：调整tsconfig.json配置 #

打开项目根目录的tsconfig.json，修改compilerOptions相关配置：

• 确保types数组包含node（之前报错是因为没装上述类型包，现在安装后即可正常识别）
• 把moduleResolution设置为bundler（Vite官方推荐）或node16
• 确认include数组包含vite.config.ts，让TypeScript对该配置文件进行类型检查

示例配置片段：

{
  "compilerOptions": {
    // 保留原有其他配置
    "types": ["node"],
    "moduleResolution": "bundler"
  },
  "include": ["vite.config.ts", "src/**/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

步骤3：重启TypeScript服务验证 #

修改完配置后，重启编辑器的TypeScript服务（比如VSCode按Ctrl+Shift+P，选择TypeScript: Restart TS Server），此时Cannot find module 'path'和类型定义的错误应该会消失。

可选：用Vite原生API替代Node.js path模块 #

如果不想依赖Node.js类型，也可以用Vite提供的fileURLToPath和URL处理路径，示例：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这种方式无需额外安装类型包，也能实现路径别名等功能，更贴合前端项目的浏览器环境规范。

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