React 中未使用 Excalidraw 定义“进程”

Question

我正在尝试将 Excalidraw 组件集成到我的 React 应用程序中。但是，当我尝试使用它时，我的应用程序崩溃并出现以下错误：

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 文件使用了 process.env，而 process.env 是 Node.js 全局对象，在浏览器环境中不可用。这是 main.js 中的相关代码：

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");
}

我遵循了官方的Excalidraw文档，但没有找到有关此错误的任何信息。

如何解决这个问题并在我的 React 项目中成功使用 Excalidraw？

其他详细信息：

• 我正在将 React (.tsx) 与 Vite 结合使用
• 我正在本地计算机上以开发模式运行该应用程序。
• 我的笔记本组件：

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

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

如果您需要任何进一步的信息，请告诉我。

Answer 1

基于此 github 讨论，您可以在 vite.config.ts 中使用以下内容来避免“Uncaught ReferenceError：进程未定义”

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'process.env': {}
  }
})