"process" is not defined in React using Excalidraw

Question

I'm trying to integrate the Excalidraw component into my React application. However, when I try to use it, my application crashes with the following error:

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

This error occurs because the main.js file of Excalidraw uses process.env, which is a Node.js global object and is not available in the browser environment. Here is the relevant code from 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");
}

I followed the official Excalidraw documentation but didn't find any information about this error.

How can I solve this problem and use Excalidraw successfully in my React project?

Additional details:

• I'm using React (.tsx) with Vite
• I'm running the app in development mode on my local machine.
• My Notebook component:

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

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

Let me know if you need any further information.

Answer 1

Based on this github discussion you can use the following in vite.config.ts to avoid "Uncaught ReferenceError: process is not defined"

import { defineConfig } from 'vite'

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