reactjs - Uncaught ReferenceError: process არ არის განსაზღვრული vite-ის განახლების შემდეგ, რატომ?

მაქვს react/typescript აპლიკაცია და სანამ დავაახლოვებდი vite, მქონდა ეს გადაწყვეტა, რათა შემემოწმებინა, თუ env არის განვითარების ან წარმოების რეჟიმი ამ კოდის მიხედვით:

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

მაგრამ როცა მე განვაახლე vite ვერსიაზე 3.1.0, მივიღე შეცდომა პროდაქშენის ბილდის სერვირების დროს შემდეგი შეცდომით: Uncaught ReferenceError: process is not defined.

მინი vite კონფიგურაცია არის:

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

არსებობს სხვა გზა პრობლემის გამოსასწორებლად, თუ შევცვლი vite.config.js? თუ განახლების შემდეგ არსებობს სხვა გადაწყვეტა, რომელი რეკომენდებულია ისე, რომ ჩემი აპლიკაცია გაგრძელდეს მუშაობა ისე, როგორც ადრე?

გმადლობთ.

პასუხი #1

გამოიყენეთ import.meta.env.MODE რეჟიმის სტრინგის მისაღებად:

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

ან უფრო მარტივად, გამოიყენეთ import.meta.env.PROD იმის შესამოწმებლად, თუ რა არის წარმოების რეჟიმის ლოგიკური მნიშვნელობა:

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