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.ts
declare 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 Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase services
const 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