Vue Uncaught ReferenceError: process is not defined

user_11422407 0
Viewed 13474

I'm working on a Vue + typescript project. I want to use process.env.var_name to adjust the project is in development mode or production mode, just like

const isProduct = process.env.APP_ENV === "prod";

; however I got an error below. I never meet this error before, so could any one give me a clue why this would happen so I can try to figure out what happend in the project and then fix it.enter image description here

vue.js webpack typescript
6 Answers
user_117731800

Env's variables must start with VUE_APP_, so try to change APP_ENV into VUE_APP_ENV. About the CORS error you have to enable your FE from your BE.

user_146503400

I have a quasar project before and this one works for me.

I installed the dotenv library by running the yarn command

yarn add --dev dotenv

Please let me know.

user_92496090

You can use if (import.meta.env.PROD) ... instead.

user_49199720 

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: { 
    host: '0.0.0.0'
  },
  define: {
    'process.env': {}
  }
 
})

user_89087890

You will get this error when referencing a variable that does not exist.
Here is the solution;

mounted () {
  window.process = {
    env: {
       NODE_ENV: 'development'
    }
}

If you use it on the page where you got an error, your error will be fixed.

user_126255590
Related