OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

"process" is not defined in React using Excalidraw

  • Thread starter Thread starter Garamog
  • Start date Start date
G

Garamog

Guest
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:

Code:
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:

Code:
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:

Code:
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.

<p>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:</p>
<pre><code>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
</code></pre>
<p>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:</p>
<pre><code>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");
}
</code></pre>
<p>I followed the official <a href="https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation" rel="nofollow noreferrer">Excalidraw documentation</a> but didn't find any information about this error.</p>
<p>How can I solve this problem and use Excalidraw successfully in my React project?</p>
<p><strong>Additional details:</strong></p>
<ul>
<li>I'm using React (.tsx) with Vite</li>
<li>I'm running the app in development mode on my local machine.</li>
<li>My Notebook component:</li>
</ul>
<pre><code>import { Excalidraw } from "@excalidraw/excalidraw";

export function Notebook() {
return (
<>
<h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
</>
);
}
</code></pre>
<p>Let me know if you need any further information.</p>
 

Latest posts

Top