How can I identify the reason why my app isn't working on Vercel, even though it runs fine locally with Expo and also works when I serve the dist folder using npx serve dist?
The issue might be related to the environment variables, but I’ve added them in the Vercel settings and double-checked everything multiple times.
env.d.tsdeclare module '@env' { // Firebase Config export const FIREBASE_API_KEY: string; export const FIREBASE_AUTH_DOMAIN: string; export const FIREBASE_PROJECT_ID: string; export const FIREBASE_STORAGE_BUCKET: string; export const FIREBASE_MESSAGING_SENDER_ID: string; export const FIREBASE_APP_ID: string; export const FIREBASE_MEASUREMENT_ID: string;
// DeepL Config export const DEEPL_API_KEY: string;
export const APP_ENV: string; export const APP_NAME: string;} firebase:
import { initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";import { getFirestore } from "firebase/firestore";import { getStorage } from "firebase/storage";import { FIREBASE_API_KEY, FIREBASE_APP_ID, FIREBASE_AUTH_DOMAIN, FIREBASE_MEASUREMENT_ID, FIREBASE_MESSAGING_SENDER_ID, FIREBASE_PROJECT_ID, FIREBASE_STORAGE_BUCKET,} from "@env";
const firebaseConfig = { apiKey: FIREBASE_API_KEY, authDomain: FIREBASE_AUTH_DOMAIN, projectId: FIREBASE_PROJECT_ID, storageBucket: FIREBASE_STORAGE_BUCKET, messagingSenderId: FIREBASE_MESSAGING_SENDER_ID, appId: FIREBASE_APP_ID, measurementId: FIREBASE_MEASUREMENT_ID,};
// Initialize Firebaseconst app = initializeApp(firebaseConfig);
// Initialize Firebase servicesconst auth = getAuth(app);const db = getFirestore(app);const storage = getStorage(app);
export { app, auth, db, storage };babel.config.js:
module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ ["module:react-native-dotenv", { "moduleName": "@env", "path": ".env", "blacklist": null, "whitelist": null, "safe": false, "allowUndefined": true, "verbose": false }] ] };}; [01:34:24.166] Previous build caches not available[01:34:25.584] Cloning completed: 1.604s[01:34:25.765] Running build in Washington, D.C., USA (East) – iad1[01:34:25.928] Running "vercel build"[01:34:26.291] Vercel CLI 41.4.1[01:34:26.888] Installing dependencies...[01:34:30.745] npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported[01:34:31.700] npm warn deprecated sudo-prompt@8.2.5: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.[01:34:32.424] npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.[01:34:33.082] npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead[01:34:33.506] npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead[01:34:33.971] npm warn deprecated @xmldom/xmldom@0.7.13: this version is no longer supported, please update to at least 0.8.*[01:34:35.229] npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.[01:34:35.229] npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.[01:34:35.370] npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.[01:34:35.568] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:35.568] npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported[01:34:35.664] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:35.692] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:35.810] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:36.124] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:36.125] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:36.422] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:36.470] npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported[01:34:36.547] npm warn deprecated sudo-prompt@9.1.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.[01:34:46.650] [01:34:46.651] added 1270 packages in 20s[01:34:46.651] [01:34:46.651] 120 packages are looking for funding[01:34:46.651] run `npm fund` for details[01:34:47.988] Starting Metro Bundler[01:34:47.992] Static rendering is enabled. Learn more: https://docs.expo.dev/router/reference/static-rendering/[01:36:35.927] λ Bundled 106036ms node_modules/expo-router/node/render.js (2123 modules)[01:36:37.596] [01:36:37.597] Metro error: Firebase: Error (auth/invalid-api-key).[01:36:37.597] [01:36:37.598] FirebaseError: Firebase: Error (auth/invalid-api-key).[01:36:37.598] at apply (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:522:47)[01:36:37.598] at _assert (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:530:35)[01:36:37.598] at t.instanceFactory (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:8313:9)[01:36:37.599] at n.getOrInitializeService (/vercel/path0/node_modules/@firebase/component/dist/index.cjs.js:342:39)[01:36:37.599] at n.initialize (/vercel/path0/node_modules/@firebase/component/dist/index.cjs.js:264:29)[01:36:37.599] at initializeAuth (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:4074:25)[01:36:37.601] at getAuth (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:8375:16)[01:36:37.601] at factory (/vercel/path0/config/firebase.ts:23:14)[01:36:37.601] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.601] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:184:12)[01:36:37.601] at _r (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.602] at factory (/vercel/path0/context/AppContext.tsx:3:1)[01:36:37.602] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.602] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:184:12)[01:36:37.602] at r (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.602] at factory (/vercel/path0/app/(tabs)/_layout.tsx:19:1)[01:36:37.602] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.602] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:177:21)[01:36:37.602] at require (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.602] at Object.map [as ./(tabs)/_layout.tsx] (/vercel/path0/app?ctx=e5807cc4e93b7ea02120ad0165264d893ac772db:10:62)[01:36:37.602] at contextModule (/vercel/path0/app?ctx=e5807cc4e93b7ea02120ad0165264d893ac772db:21:12)[01:36:37.603] at Object.loadRoute (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:72:35)[01:36:37.603] at getLayoutNode (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:412:25)[01:36:37.603] at getDirectoryTree (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:148:28)[01:36:37.603] at getRoutes (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:19:27)[01:36:37.603] at getRoutes (/vercel/path0/node_modules/expo-router/build/getRoutes.js:18:32)[01:36:37.603] at apply (/vercel/path0/node_modules/expo-router/build/static/getServerManifest.js:23:39)[01:36:37.603] at getBuildTimeServerManifestAsync (/vercel/path0/node_modules/@expo/cli/src/start/server/getStaticRenderFunctions.ts:112:25)[01:36:37.603] at MetroBundlerDevServer.getStaticRenderFunctionAsync (/vercel/path0/node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts:290:29)[01:36:37.603] at async Promise.all (index 1)[01:36:37.603] at exportFromServerAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportStaticAsync.ts:164:66)[01:36:37.603] at exportAppAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportApp.ts:352:9)[01:36:37.603] at exportAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportAsync.ts:21:3)[01:36:37.603] FirebaseError: Firebase: Error (auth/invalid-api-key).[01:36:37.604] FirebaseError: Firebase: Error (auth/invalid-api-key).[01:36:37.604] at apply (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:522:47)[01:36:37.604] at _assert (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:530:35)[01:36:37.604] at t.instanceFactory (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:8313:9)[01:36:37.604] at n.getOrInitializeService (/vercel/path0/node_modules/@firebase/component/dist/index.cjs.js:342:39)[01:36:37.604] at n.initialize (/vercel/path0/node_modules/@firebase/component/dist/index.cjs.js:264:29)[01:36:37.604] at initializeAuth (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:4074:25)[01:36:37.604] at getAuth (/vercel/path0/node_modules/firebase/node_modules/@firebase/auth/dist/node/totp-259483a2.js:8375:16)[01:36:37.604] at factory (/vercel/path0/config/firebase.ts:23:14)[01:36:37.604] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.604] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:184:12)[01:36:37.604] at _r (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.604] at factory (/vercel/path0/context/AppContext.tsx:3:1)[01:36:37.604] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.604] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:184:12)[01:36:37.604] at r (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.604] at factory (/vercel/path0/app/(tabs)/_layout.tsx:19:1)[01:36:37.605] at loadModuleImplementation (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:277:5)[01:36:37.605] at guardedLoadModule (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:177:21)[01:36:37.605] at require (/vercel/path0/node_modules/metro-runtime/src/polyfills/require.js:92:7)[01:36:37.605] at Object.map [as ./(tabs)/_layout.tsx] (/vercel/path0/app?ctx=e5807cc4e93b7ea02120ad0165264d893ac772db:10:62)[01:36:37.605] at contextModule (/vercel/path0/app?ctx=e5807cc4e93b7ea02120ad0165264d893ac772db:21:12)[01:36:37.605] at Object.loadRoute (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:72:35)[01:36:37.605] at getLayoutNode (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:412:25)[01:36:37.605] at getDirectoryTree (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:148:28)[01:36:37.605] at getRoutes (/vercel/path0/node_modules/expo-router/build/getRoutesCore.js:19:27)[01:36:37.605] at getRoutes (/vercel/path0/node_modules/expo-router/build/getRoutes.js:18:32)[01:36:37.605] at apply (/vercel/path0/node_modules/expo-router/build/static/getServerManifest.js:23:39)[01:36:37.605] at getBuildTimeServerManifestAsync (/vercel/path0/node_modules/@expo/cli/src/start/server/getStaticRenderFunctions.ts:112:25)[01:36:37.605] at MetroBundlerDevServer.getStaticRenderFunctionAsync (/vercel/path0/node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts:290:29)[01:36:37.605] at async Promise.all (index 1)[01:36:37.605] at exportFromServerAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportStaticAsync.ts:164:66)[01:36:37.605] at exportAppAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportApp.ts:352:9)[01:36:37.605] at exportAsync (/vercel/path0/node_modules/@expo/cli/src/export/exportAsync.ts:21:3)[01:36:37.676] Error: Command "npx expo export --platform web --output-dir dist" exited with 1[01:36:38.179] Rect Native, Firebase, react-native-dotenv, npx expo export --platform web --output-dir dist, npx serve dist