React(Vite)集成Excalidraw遇process未定义错误求助

在React(.tsx)+Vite项目中集成Excalidraw组件时，本地开发模式下应用崩溃，报错：

Uncaught ReferenceError: process is not defined
at node_modules/@excalidraw/excalidraw/main.js (main.js:1:1)
at __require (chunk-WXXH56N5.js?v=842e9aa2:12:50)
at main.js:11:1

错误根源是Excalidraw的main.js依赖Node.js全局对象process.env，但浏览器环境中不存在该对象，相关代码片段如下：

if (process.env.IS_PREACT === "true") {
    if (process.env.NODE_ENV === "production") {
        module.exports = require("./dist/excalidraw-with-preact.production.min.js");
    } else {
        module.exports = require("./dist/excalidraw-with-preact.development.js");
    }
} else if (process.env.NODE_ENV === "production") {
    module.exports = require("./dist/excalidraw.production.min.js");
} else {
    module.exports = require("./dist/excalidraw.development.js");
}

已查阅官方文档未找到对应解决方法，当前使用的Notebook组件代码：

import { Excalidraw } from "@excalidraw/excalidraw";

export function Notebook() {
    return (
        <>
            <h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
            <div style={{ height: "500px" }}>
                <Excalidraw />
            </div>
        </>
    );
}

针对Vite环境下的这个问题，提供两种可行解决方式：

方式一：直接导入编译后产物 #

绕过Excalidraw的入口文件，直接引入对应环境的编译好的组件文件：

// 开发环境使用
import { Excalidraw } from "@excalidraw/excalidraw/dist/excalidraw.development.js";

// 生产环境切换为
// import { Excalidraw } from "@excalidraw/excalidraw/dist/excalidraw.production.min.js";

方式二：配置Vite注入process.env变量 #

在项目根目录的vite.config.ts中添加环境变量注入配置，模拟Node.js的process.env对象：

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

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'process.env.IS_PREACT': JSON.stringify('false') // React项目设为false即可
  }
})

配置完成后重启Vite开发服务，即可正常加载Excalidraw组件。

额外建议 #

如果使用的Excalidraw版本较旧，可以尝试升级到最新稳定版，部分新版本已经修复了浏览器环境下依赖process的问题。

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