React项目升级Vite后node-fetch导出匹配错误求助

问题描述 #

将 React 项目构建工具升级为 Vite 后，出现以下错误：

• 在 node_modules/node-fetch/lib/index.mjs 中找不到匹配的导出项用于导入 RequestInit
• 在 node_modules/node-fetch/lib/index.mjs 中找不到匹配的导出项用于导入 Body

经排查，问题由私有依赖包 @ThePackage/CausingIssue 引发，且无法修改该包。

已尝试操作 #

• 搜索谷歌、Stack Overflow 相关内容
• 尝试搭配不同版本的 @types 包
• 使用 ChatGPT 寻求方案
• 确认依赖包中 node-fetch 存在且报错的导出项确实存在
• 排查 TypeScript 类型相关问题

可行解决方案 #

方案1：通过 Vite 配置重定向 node-fetch #

在 vite.config.ts 中添加别名配置，将私有包中的 node-fetch 指向兼容的版本：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'node-fetch': 'node-fetch/lib/index.js'
    }
  }
});

方案2：手动补充 TypeScript 类型声明 #

在项目根目录创建 src/types/node-fetch.d.ts 文件，手动补充缺失的导出类型：

declare module 'node-fetch' {
  export interface RequestInit extends globalThis.RequestInit {}
  export class Body {
    constructor(body?: any, options?: { headers?: HeadersInit });
    body: ReadableStream | null;
    bodyUsed: boolean;
    arrayBuffer(): Promise<ArrayBuffer>;
    blob(): Promise<Blob>;
    formData(): Promise<FormData>;
    json(): Promise<any>;
    text(): Promise<string>;
  }
  export default function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
  export interface Response extends Body {}
}

然后在 tsconfig.json 中引入该声明文件：

{
  "compilerOptions": {
    // 其他配置...
    "typeRoots": ["./src/types", "./node_modules/@types"]
  }
}

方案3：跳过私有包的 TypeScript 类型检查 #

如果类型问题不影响运行，可在 tsconfig.json 中配置跳过该私有包的类型检查：

{
  "compilerOptions": {
    // 其他配置...
    "skipLibCheck": true
  },
  "exclude": ["node_modules/@ThePackage/CausingIssue"]
}

方案4：用插件处理 CommonJS 模块 #

若私有包使用 CommonJS 规范导致 Vite 处理异常，安装 vite-plugin-commonjs 插件并配置：

npm install vite-plugin-commonjs --save-dev

在 vite.config.ts 中添加插件配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [react(), commonjs({
    include: ['node_modules/@ThePackage/CausingIssue/**/*']
  })]
});

验证步骤 #

修改配置后，执行 npm run dev 启动项目，检查是否仍存在导出项找不到的错误。

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