reactjs - Ouppfångat ReferenceError: process är inte definierad efter uppdatering av vite, varför?

Jag har en react/typescript-app och innan jag uppdaterade vite hade jag denna lösning för att kolla om env är utveckling eller produktion med denna kod:

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()];

Men efter att jag uppdaterade vite till version 3.1.0 fick jag ett fel när jag serverade produktionsbygget med följande fel: Uncaught ReferenceError: process är inte definierad.

Min vite-konfiguration är:

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"],
    },
  },
});

Finns det ett annat sätt att åtgärda problemet eller missar jag något i min vite.config.js? Om det är en annan lösning efter uppgraderingen, vilken är den rekommenderade så att min applikation fungerar på samma sätt som tidigare?

Tack.

Svar #1

Använd import.meta.env.MODE för att få modsträngen:

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

Eller enklare, använd import.meta.env.PROD för att få ett Boolean som anger produktionsläge:

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