fix: Migrate env vars from process.env to import.meta.env (#10315)

* 🐛 (feature-flags.ts): update usage of process.env to import.meta.env for Vite compatibility
🔧 (vite.config.mts): replace process.env with import.meta.env in Vite configuration for better integration with Vite bundler

* 🔧 (constants.ts): replace process.env with import.meta.env for Vite compatibility
🔧 (vite-env.d.ts): declare ImportMetaEnv and ImportMeta interfaces for Vite compatibility

* ✨ (jest.config.js): Update Jest configuration to use a custom transformer for replacing import.meta.env with process.env for compatibility
✨ (transform-import-meta.js): Add custom Jest transformer to replace import.meta.env with process.env for compatibility with Jest testing framework

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
   ],
   testPathIgnorePatterns: ["/node_modules/", "test-utils.tsx"],
   transform: {
-    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.(ts|tsx)$": "<rootDir>/transform-import-meta.js",
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
   // Ignore node_modules except for packages that need transformation

src/frontend/src/constants/constants.ts

@@ -852,8 +852,8 @@ export const LANGFLOW_REFRESH_TOKEN = "refresh_token_lf";
 
 export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS = 60 * 60 - 60 * 60 * 0.1;
 export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV =
-  Number(process.env?.ACCESS_TOKEN_EXPIRE_SECONDS ?? 60) -
-  Number(process.env?.ACCESS_TOKEN_EXPIRE_SECONDS ?? 60) * 0.1;
+  Number(import.meta.env?.ACCESS_TOKEN_EXPIRE_SECONDS ?? 60) -
+  Number(import.meta.env?.ACCESS_TOKEN_EXPIRE_SECONDS ?? 60) * 0.1;
 export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];
 export const NODE_WIDTH = 384;
 export const NODE_HEIGHT = NODE_WIDTH * 3;
@@ -920,8 +920,8 @@ export const POLLING_MESSAGES = {
 export const BUILD_POLLING_INTERVAL = 25;
 
 export const IS_AUTO_LOGIN =
-  !process?.env?.LANGFLOW_AUTO_LOGIN ||
-  String(process?.env?.LANGFLOW_AUTO_LOGIN)?.toLowerCase() !== "false";
+  !import.meta.env?.LANGFLOW_AUTO_LOGIN ||
+  String(import.meta.env?.LANGFLOW_AUTO_LOGIN)?.toLowerCase() !== "false";
 
 export const AUTO_LOGIN_RETRY_DELAY = 2000;
 export const AUTO_LOGIN_MAX_RETRY_DELAY = 60000;

src/frontend/src/customization/feature-flags.ts

@@ -18,5 +18,5 @@ export const ENABLE_MCP_NOTICE = false;
 export const ENABLE_KNOWLEDGE_BASES = false;
 
 export const ENABLE_MCP_COMPOSER =
-  process.env.LANGFLOW_MCP_COMPOSER_ENABLED === "true";
+  import.meta.env.LANGFLOW_MCP_COMPOSER_ENABLED === "true";
 export const ENABLE_NEW_SIDEBAR = true;

src/frontend/src/vite-env.d.ts

@@ -1,6 +1,18 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 
+interface ImportMetaEnv {
+  readonly BACKEND_URL: string;
+  readonly ACCESS_TOKEN_EXPIRE_SECONDS: string;
+  readonly CI: string;
+  readonly LANGFLOW_AUTO_LOGIN: string;
+  readonly LANGFLOW_MCP_COMPOSER_ENABLED: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
 declare module "*.svg" {
   const content: string;
   export default content;

src/frontend/transform-import-meta.js

@@ -0,0 +1,22 @@
+// Custom Jest transformer to replace import.meta.env with process.env
+const tsJest = require("ts-jest").default;
+
+module.exports = {
+  createTransformer() {
+    const tsJestTransformer = tsJest.createTransformer();
+
+    return {
+      ...tsJestTransformer,
+      process(sourceText, sourcePath, options) {
+        // Replace import.meta.env with process.env before ts-jest processes it
+        let modifiedSource = sourceText.replace(
+          /import\.meta\.env/g,
+          "process.env",
+        );
+
+        // Call the original ts-jest transformer
+        return tsJestTransformer.process(modifiedSource, sourcePath, options);
+      },
+    };
+  },
+};

src/frontend/vite.config.mts

@@ -43,17 +43,17 @@ export default defineConfig(({ mode }) => {
       outDir: "build",
     },
     define: {
-      "process.env.BACKEND_URL": JSON.stringify(
+      "import.meta.env.BACKEND_URL": JSON.stringify(
         envLangflow.BACKEND_URL ?? "http://localhost:7860",
       ),
-      "process.env.ACCESS_TOKEN_EXPIRE_SECONDS": JSON.stringify(
+      "import.meta.env.ACCESS_TOKEN_EXPIRE_SECONDS": JSON.stringify(
         envLangflow.ACCESS_TOKEN_EXPIRE_SECONDS ?? 60,
       ),
-      "process.env.CI": JSON.stringify(envLangflow.CI ?? false),
-      "process.env.LANGFLOW_AUTO_LOGIN": JSON.stringify(
+      "import.meta.env.CI": JSON.stringify(envLangflow.CI ?? false),
+      "import.meta.env.LANGFLOW_AUTO_LOGIN": JSON.stringify(
         envLangflow.LANGFLOW_AUTO_LOGIN ?? true,
       ),
-      "process.env.LANGFLOW_MCP_COMPOSER_ENABLED": JSON.stringify(
+      "import.meta.env.LANGFLOW_MCP_COMPOSER_ENABLED": JSON.stringify(
         envLangflow.LANGFLOW_MCP_COMPOSER_ENABLED ?? "true",
       ),
     },