reactjs - ReferenceError no capturado: process no está definido después de la actualización de vite, ¿por qué?

Tengo una aplicación de React/TypeScript y antes de actualizar vite tenía esta solución para comprobar si env está en desarrollo o producción con este código:

function getEnvironment(): "production" | "development" {
  if (process.env.NODE_ENV === "production") {
    return "production";
  }
  return "development";
}

type EnvUrl = { development: string; production: string };

const API_URL: EnvUrl = {
  development: "http://localhost:5173/api/endpoint",
  production: "https://ingress-url/api/endpoint",
};

export const apiUrl = API_URL[getEnvironment()];

Pero después de actualizar vite a la versión 3.1.0, obtuve un error al servir la compilación de producción con el siguiente error: Uncaught ReferenceError: process is not defined.

La configuración de vite es:

import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { rollupImportMapPlugin } from "rollup-plugin-import-map";
import { terser } from "rollup-plugin-terser";
import { ConfigEnv } from "vite";
import viteCompression from "vite-plugin-compression";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import { viteMockServe } from "vite-plugin-mock";
import { UserConfigExport } from "vitest/config";

const reactUrl = "my-cdn-url/react/18/esm/index.js";
const reactDomUrl = "my-cdn-url/react-dom/18/esm/index.js";

const imports = {
  react: reactUrl,
  "react-dom": reactDomUrl,
};

export default ({ command }: ConfigEnv): UserConfigExport => ({
  plugins: [
    react(),
    terser(),
    cssInjectedByJsPlugin(),
    viteCompression({
      algorithm: "gzip",
    }),
    viteCompression({
      algorithm: "brotliCompress",
    }),
    viteMockServe({
      mockPath: "mock",
      localEnabled: command === "serve",
    }),
    {
      ...rollupImportMapPlugin([{ imports }]),
      enforce: "pre",
      apply: "build",
    },
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/Mikrofrontend.tsx"),
      name: "sokos-attestasjon-frontend",
      formats: ["es"],
      fileName: () => `bundle.js`,
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    deps: {
      inline: ["@testing-library/user-event"],
    },
  },
});

¿Hay otra forma de solucionar el problema o me está faltando algo en mi vite.config.js? Si es otra solución después de la actualización, ¿cuál es la recomendada para que mi aplicación se comporte igual que antes?

Gracias.

Respuesta #1

Usa import.meta.env.MODE para obtener la cadena del modo:

if (import.meta.env.MODE === "production") {
  return "production";
}

O más simplemente, usa import.meta.env.PROD para obtener un Booleano que indique el modo de producción:

if (import.meta.env.PROD) {
  return "production";
}