Vite+React项目中Octokit.js无法使用：模块被外部化问题

问题场景 #

在React项目中使用Vite构建工具引入Octokit，代码如下：

import { Octokit } from "octokit";
const githubToken = import.meta.env.REACT_APP_GITHUB_TOKEN;
const octokit = new Octokit({auth: githubToken});

原本预期可正常发起请求，却出现错误提示：

Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
翻译：模块"stream"已为浏览器兼容性被外部化，无法在客户端代码中访问

解决方案 #

步骤1：安装浏览器兼容的polyfill依赖 #

npm install stream-browserify @rollup/plugin-inject --save-dev

步骤2：配置Vite以替换Node.js核心模块 #

修改vite.config.js文件，添加别名和Rollup注入配置：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    // 用stream-browserify替代原生stream模块
    alias: {
      stream: 'stream-browserify'
    }
  },
  build: {
    rollupOptions: {
      plugins: [
        // 向Octokit的代码中注入stream的polyfill
        inject({
          include: ['node_modules/octokit/dist/**/*.js'],
          modules: {
            stream: 'stream-browserify'
          }
        })
      ]
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      // 定义global变量适配浏览器环境
      define: {
        global: 'globalThis'
      }
    }
  }
});

原理说明 #

Vite默认会将Node.js核心模块（如stream）标记为外部化，避免在浏览器环境中加载不兼容的代码。但Octokit内部依赖这些模块，因此需要通过stream-browserify提供浏览器兼容的实现，并配置Vite将原生模块替换为该polyfill，同时注入必要的全局变量适配环境。

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