Error in Vite Preview : Uncaught (in promise) ReferenceError: process is not defined

Question

I am facing this Uncaught (in promise) ReferenceError: process is not defined error when using vite preview after vite build.

My vite.config.js looks something like below.

import {defineConfig} from 'vite';
import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
// ...
export default defineConfig({
  // ...
  build: {
    sourcemap: true,
    emptyOutDir: false
  },
  server: {
    host: true
  },
  define: {
    'process.env': {}
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true
        })
      ]
    }
  }
});

I am not facing this error when using npm start. Could someone please help me in this situation.

Answer 1

env variables VITE DOCS

In your .env file define the variables starting with 'VITE_'.

To read the variable use 'import.meta.env.'

Example:

VITE_SOME_KEY='examplekey'

const READ_KEY = import.meta.env.VITE_SOME_KEY;

Try using that in your vite config file: CONFIG Environment Variables Replacing the .env with the import.meta.env