DEV Community

Cover image for How to fix 'process' is not defined (React+Vite)
Navindu Abhishek
Navindu Abhishek

Posted on

How to fix 'process' is not defined (React+Vite)

Most of the time when we use "create react app" this error not came. but when we working with react+vite its kind of different. So Here's a step-by-step guide to setting up environment variables in a Vite project.

I think you already created a .env file root in your project. if not create .env file in root in your project and ensure all variables should be prefixed with VITE_.

Example:
VITE_EXAMPLE_API_KEY=your api key

So we can use import.meta.env object to access these environment variables.

Example:

export const exerciseOptions ={
method: 'GET',
headers: {
'X-API-Key': import.meta.env.VITE_EXAMPLE_API_KEY,
'X-API-Host': 'www.example.com'
}
};

After changing environment variables you have to restart the development server to make this work.

By following these steps you can fix this issue.

Top comments (0)