3

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.

enter image description here

.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,
},

enter image description here

Kaneki21
  • 1,323
  • 2
  • 4
  • 22
Study
  • 85
  • 1
  • 3
  • 8

5 Answers5

5

i am using vite react and i got the same error after searching everYthing which i have already done, still process is not define.

so i defined it in vite.config.js file by this

define: {'process.env': {}}

usmannoor90
  • 77
  • 1
  • 8
  • 3
    This pointed me to the right direction, but the better option for my case is `define: {'process.env': process.env}`, credit : https://github.com/vitejs/vite/issues/1973#issuecomment-815695512 – Rosdi Kasim Jun 06 '23 at 05:29
3

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.

Kiruban Naidoo
  • 31
  • 2
1

Vite reveals the env variable on the particular type of object called import.meta.env and provides some built-in variables in some cases:

  • import.meta.env.MODE: The mode the app is running in(type string)
  • import.meta.env.BASE_URL: the base url the app is being served from(type string)
  • import.meta.env.PROD: whether the app is running in production mode(type boolean)
  • import.meta.env.DEV: whether the app is running in development mode(type boolean)
  • import.meta.env.SSR: whether the app is running in server(type boolean)

Vite uses dotenv package to load additional environment variables from the following files in your environment directory: like, .env, .env.local, .env.[mode] and .env.[mode].local.

Note: An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env). env files are loaded at the start of Vite. Restart the server after making changes.

Only VITE_SOME_KEY will be exposed as import.meta.env.VITE_SOME_KEY to your client source code, but SOME_KEY will not. Simply use in Vite, import.meta.env.VITE_SOME_KEY to get values, Otherwise it gets undefined. Also, Vite uses dotenv-expand to expand variables out of the box.

To know more exploring, you can check the vite doc - https://vitejs.dev/guide/env-and-mode.html#env-files

Akash Das
  • 41
  • 7
0

You have to load the environmental variables using dotenv (in server side) as in this answer and get it into front end using Ajax (if you need to use environmental variables in front end).

Usitha Indeewara
  • 870
  • 3
  • 10
  • 21
-1

Try with npm run start otherwise this should work for you: https://stackoverflow.com/a/49579700/9464846 Its always a config issue.

Anass
  • 301
  • 1
  • 3
  • 13
  • I did the steps and this error appeared in the console (Uncaught ReferenceError: require is not defined at main.tsx:1:1). – Study Sep 26 '22 at 13:48
  • Please try deleting node modules and running npm install – Anass Sep 29 '22 at 10:40