Using environment variables in Vite results in 'process is not defined'
Quick solution
Replace process.env.HOGE
with import.meta.env.VITE_HOGE
.
For more detailed information, it is recommended to read the official documentation.
What happened
The other day、I migrated my create-react-app portfolio site to Vite.
As a result, an error occurred at the place where the environment variable process.env.REACT_APP_WEBHOOK_URL
was previously referenced, saying process is not defined
.
Upon investigation, it turns out that the way to reference environment variables is different in Vite.
Solution Returns
How to reference
As mentioned above, replace process.env.HOGE
with import.meta.env.VITE_HOGE
.
A VITE_
prefix is required. For example, the .env
file would look like this:
# This will be loaded
VITE_HOGE=fuga
# This will be loaded
HOGE=fuga
Configuration for TypeScript
Suppose you call an environment variable like this:
const url = import.meta.env.VITE_URL
const response = await axios.get(url)
Then, you will get an error with the type definition saying Argument of type 'string | boolean | undefined' is not assignable to parameter of type 'string'
.
To enable TypeScript’s autocompletion for environment variables, add the following type definition to the src/vite-env.d.ts(or env.d.ts)
file.
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_URL: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
This will enable TypeScript’s autocompletion.
Conclusion
In addition to the above settings, the official documentation also describes settings for separating environment variables for each environment. It is highly recommended to refer to it.