Uncaught ReferenceError: process is not defined
Tags: vite, react, environment, variables
Published: 2023-08-20 15:42:10

## How to solve the following error ?
```
Uncaught ReferenceError: process is not defined
```

First, this happens when, in your [Vite/React project](https://vitejs.dev/guide/), you add a code equivalent to the following:
```
const someValue = process.env.SOME_KEY;
```

In other words, you're simply trying to read a value from your `.env` file, which includes assignments similar to this:
```
SOME_KEY=A_VERY_IMPORTANT_VALUE_YOU_NEED
```

## Solving this issue

1. Open the `vite.config.ts` file

1. Add `loadEnv` in your imports: 
`import { defineConfig, loadEnv } from 'vite'`

1. Add an `env` const assigment: 
`const env = loadEnv(mode, process.cwd(), '');`

1. add a `define` object at the same level than the `plugins` array:
```
return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }
```

## Complete code

Now, here's the `before` & `after` code.

### The `vite.config.ts` file before:

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})
```

### the `vite.config.ts` file after:

```
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env.SOME_KEY': JSON.stringify(env.SOME_KEY)
    },
    plugins: [react()],
  }
})
```
## Some final notes

So, if your like me, you'd be like: "but, wait a minute! Am I gonna have to manually write every single new key/value pair in the `.env` file, AND repeat myself in the `vite.config.ts` ?"  

Well...this is exactly what this solution implies! I'm not happy about this, but at least it is a solution.

Why is is important to have this solution?  Well because the CI/CD process on Netlify would fail because of the `Uncaught ReferenceError: process is not defined` error.

### Alternative solution:
If you wish to avoid having to repeat the name of the keys in the `vite.config.ts` file, you could have the following:

```
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env': env
    },
    plugins: [react()],
  }
})
```

#### Disclaimer
You might not wish to expose the entire contents of `process.env` to the front end, so manually picking the keys/names of the values you wish to get access to in the front, becomes an sort of `security` device...

Also, notice that in the `after` code suggested where you do manually pick them, you might or might not have to `stringify` the selected keys' values.

## A better alternative solution perhaps

I guess a solution somewhere in the middle would be to have an array containaing the name of the keys you wish to cherrypick from the `process.env`, and then loop over it, so as to dynamically generate the object that is assigned to the `define` key.

```
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

const cherryPickedKeys = [
  "SOME_KEY_IN_YOUR_ENV_FILE",
  "SOME_OTHER_KEY_IN_YOUR_ENV_FILE",
];

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const processEnv = {};
  cherryPickedKeys.forEach(key => processEnv[key] = env[key]);

  return {
    define: {
      'process.env': processEnv
    },
    plugins: [react()],
  }
})
```

## Final notes for TypeScript

If your project is in Typescript, an intellisense problem will pop up, which will also have the CI/CD process fail:

```
Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.ts(2580)
```

And indeed, the solution to install the `@types/node` package, as suggested by VS Code, works and the problem goes away !