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.