React Uncaught ReferenceError: process is not defined?

Question

My app in react.ts contains the .env file to store variables with confidential data. But when using process.env.REACT_APP_CLIENT_ID an error appears in the console.

Uncaught ReferenceError: process is not defined

How to solve? Help me please.

.env file

REACT_APP_CLIENT_ID = ed75ba30-1810

authConfig.tsx file

export const msalConfig: Configuration = {
auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: "https://login.microsoftonline.com,
},

Answer 1

Vite doesn't provide a built-in process variable like Node.js does. Vite is designed for frontend development and doesn't include a Node.js-like global object.

To access environment variables in Vite, you can use the import.meta.env object. This object allows you to access environment variables defined in your Vite project.

In your example, rename your variable in the env file as follows:

From: REACT_APP_CLIENT_ID = ed75ba30-1810

To: VITE_REACT_APP_CLIENT_ID = ed75ba30-1810

Make sure to prefix your environment variables with VITE_ when using Vite, as it automatically exposes variables starting with that prefix.

Your authConfig file should then be:

export const msalConfig: Configuration = {
auth: {
    clientId: import.meta.env.VITE_REACT_APP_CLIENT_ID,
    authority: "https://login.microsoftonline.com,
},

Basically replace process.env with import.meta.env

Works really well.