Import.meta.env undefined on production build vitejs

I am using Vite to statically compile my React app. However, after building, .env imports become undefined, which is not the case at the development stage.

Reading the docs, I've found out that these variables are replaced by their corresponding values, but upon looking at the source/compiled code in the DevTools after serving, it shows an empty object with the .env name/key.

My vite.config.ts configuration:

//vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { getAliases } from 'vite-aliases';

const aliases = getAliases({
  path: 'src',
  prefix: '@',
});

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
  // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

  const plugins = mode === 'development' ? [reactRefresh()] : [];
  return defineConfig({
    plugins,
    publicDir: 'src/assets',
    resolve: {
      alias: aliases,
    },
    build: {
      chunkSizeWarningLimit: 1500,
    },
  });
};

The code where I reference these .env vars:

//config.ts
export const config = () => {
  const url = import.meta.env.VITE_SERVER_URL;
  const api = import.meta.env.VITE_API_ENDPOINT;
  const auth = import.meta.env.VITE_AUTH_ENDPOINT;

  const isProd = import.meta.env.MODE === 'production';
  const isDev = import.meta.env.MODE === 'development';

  console.log(url, api, auth);
  return {
    api: (endpoint: string) => `${url}${api}${endpoint}`,
    auth: (endpoint: string) => `${url}${auth}${endpoint}`,
    test: (endpoint: string) => `${url}test${endpoint}`,
    isProd,
    isDev,
  };
};

Get this solution programmatically \u2014 free, no authentication.