Server Function firebase creates for next js gives Error #8249

JwillSDP · 2025-02-24T04:21:09Z

[REQUIRED] Environment info

firebase-tools: 13.31.2

Platform:Windows

[REQUIRED] Test case

Firebase ssrv function for Next js app is logging in cloud as

TypeError: it.handle is not a function
    at /workspace/server.js:3:94
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

The Log explanation:

The log entry indicates a TypeError: it.handle is not a function error within a Cloud Run service named ssrv12elites in the us-east1 region. This suggests that the handle property is not available on the it object, likely within the server.js file at line 3, column 94.

This could be due to several reasons, including:

Incorrect module import or variable assignment: The it object might not be correctly imported or assigned before being used. There could be a typo in the import statement or the variable name.
Asynchronous operation not handled correctly: If it represents an asynchronous operation, the handle property might not be available until the operation completes. Improper use of promises or async/await could be causing the error.
Incorrect library version: A library dependency might be outdated or have a bug that causes this error. Check the library's documentation and version compatibility.
Unhandled exception in a previous part of the code: An error before the line reported might have altered the object state.
To validate the root cause, examine the server.js file around line 3, column 94 to understand the context where it.handle is used. Carefully review the code for potential typos, incorrect asynchronous handling, and outdated libraries. Consider adding more robust error handling to pinpoint the issue. Check the package.json file for the correct and updated versions of your dependencies. A debugger can also be used for a step-by-step execution of your code, allowing you to inspect variable values.

the server.js in .firebase folder is:

const { onRequest } = require('firebase-functions/v2/https');
  const server = import('firebase-frameworks');
  exports.ssrv12elites = onRequest({"region":"us-east1"}, (req, res) => server.then(it => it.handle(req, res)));

I receive 500 errors everytime the function is called

My package.json:

{
  "name": "next-app-template",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
    "format": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },
  "dependencies": {
    "@heroui/button": "2.2.9",
    "@heroui/code": "2.2.6",
    "@heroui/input": "2.4.9",
    "@heroui/kbd": "2.2.6",
    "@heroui/link": "2.2.7",
    "@heroui/listbox": "2.3.9",
    "@heroui/navbar": "2.2.8",
    "@heroui/react": "^2.6.14",
    "@heroui/snippet": "2.2.10",
    "@heroui/switch": "2.2.8",
    "@heroui/system": "2.4.6",
    "@heroui/theme": "2.4.5",
    "@react-aria/ssr": "3.9.7",
    "@react-aria/visually-hidden": "3.8.18",
    "clsx": "2.1.1",
    "eslint-plugin-tailwindcss": "^3.18.0",
    "firebase": "^11.3.1",
    "firebase-admin": "^13.1.0",
    "firebase-frameworks": "^0.4.2",
    "firebase-functions": "^6.3.2",
    "firebase-tools": "^13.31.2",
    "framer-motion": "11.13.1",
    "google-auth-library": "^9.15.0",
    "googleapis": "^144.0.0",
    "intl-messageformat": "^10.5.0",
    "next": "^15.2.0-canary.57",
    "next-themes": "^0.4.4",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-error-boundary": "^5.0.0",
    "usehooks-ts": "^3.1.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^15.0.4",
    "@react-types/shared": "3.25.0",
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "^8.11.0",
    "@typescript-eslint/parser": "^8.11.0",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "15.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.49",
    "prettier": "3.3.3",
    "tailwind-variants": "0.1.20",
    "tailwindcss": "3.4.16",
    "typescript": "5.6.3"
  }
}

[REQUIRED] Steps to reproduce

Deploy hosting Next js 15 app

[REQUIRED] Expected behavior

Use of the server function for dynamic data

[REQUIRED] Actual behavior

Internal Server Error on pages that retrieve firebase data

TypeError: it.handle is not a function
at /workspace/server.js:3:94
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

The log entry indicates a TypeError: it.handle is not a function error within a Cloud Run service named ssrv12elites in the us-east1 region. This suggests that the handle property is not available on the it object, likely within the server.js file at line 3, column 94.

This could be due to several reasons, including:

Incorrect module import or variable assignment: The it object might not be correctly imported or assigned before being used. There could be a typo in the import statement or the variable name.
Asynchronous operation not handled correctly: If it represents an asynchronous operation, the handle property might not be available until the operation completes. Improper use of promises or async/await could be causing the error.
Incorrect library version: A library dependency might be outdated or have a bug that causes this error. Check the library's documentation and version compatibility.
Unhandled exception in a previous part of the code: An error before the line reported might have altered the object state.
To validate the root cause, examine the server.js file around line 3, column 94 to understand the context where it.handle is used. Carefully review the code for potential typos, incorrect asynchronous handling, and outdated libraries. Consider adding more robust error handling to pinpoint the issue. Check the package.json file for the correct and updated versions of your dependencies. A debugger can also be used for a step-by-step execution of your code, allowing you to inspect variable values.

The log entry indicates an HTTP 500 error occurred in a Cloud Run service (ssrv12elites) deployed in the us-east1 region. This could be due to several reasons, including:

Code error: A bug in the application code itself causing an unhandled exception or internal server error.
Resource exhaustion: The application might be exceeding resource limits (CPU, memory, or network) allocated to the Cloud Run instance.
Dependency failure: An external dependency (database, API, etc.) the application relies on might be unavailable or responding slowly.
Configuration issue: An incorrect configuration of the Cloud Run service or its environment variables could lead to errors.
To validate the root cause, check the application logs for more detailed error messages, monitor resource usage of the Cloud Run service, and verify the health and availability of any external dependencies. Investigate the trace ID in Cloud Trace for a more detailed view of the request execution and potential bottlenecks. Also, review the Cloud Run service configuration to ensure it aligns with the application's requirements.

The text was updated successfully, but these errors were encountered:

JwillSDP · 2025-02-24T23:35:00Z

Here is my firebase json:

{
  "hosting": {
    "source": ".",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "us-east1"
    }
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "rewrites": [
    {
      "source": "**",
      "function": "ssrv12elites",
      "region": "us-east1"
    }
  ],
  "emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./",
      "startCommand": "npm run dev"
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

JwillSDP · 2025-02-24T23:39:06Z

Here is the package.json in the .firebase folder for server.js

{
  "name": "next-app-template",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@heroui/button": "2.2.9",
    "@heroui/code": "2.2.6",
    "@heroui/input": "2.4.9",
    "@heroui/kbd": "2.2.6",
    "@heroui/link": "2.2.7",
    "@heroui/listbox": "2.3.9",
    "@heroui/navbar": "2.2.8",
    "@heroui/react": "^2.6.14",
    "@heroui/snippet": "2.2.10",
    "@heroui/switch": "2.2.8",
    "@heroui/system": "2.4.6",
    "@heroui/theme": "2.4.5",
    "@react-aria/ssr": "3.9.7",
    "@react-aria/visually-hidden": "3.8.18",
    "clsx": "2.1.1",
    "eslint-plugin-tailwindcss": "^3.18.0",
    "firebase": "^11.3.1",
    "firebase-admin": "^13.1.0",
    "firebase-frameworks": "^0.4.2",
    "firebase-functions": "^6.3.2",
    "firebase-tools": "^13.31.2",
    "framer-motion": "11.13.1",
    "google-auth-library": "^9.15.0",
    "googleapis": "^144.0.0",
    "intl-messageformat": "^10.5.0",
    "next": "^15.2.0-canary.57",
    "next-themes": "^0.4.4",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-error-boundary": "^5.0.0",
    "usehooks-ts": "^3.1.0"
  },
  "main": "server.js",
  "engines": {
    "node": "20"
  }
}

leoortizz · 2025-03-14T19:01:41Z

Hey @JwillSDP, thanks for reporting the issue. The main problem with your project is the dependency on firebase-frameworks version ^0.4.2. The latest firebase-frameworks version is v0.11.6(v0.11.7 will be released soon).

You can safely remove firebase-frameworks as a dependency from your project and let firebase-tools handle that for you, that way you'll always have the latest version. Here's where it's handled in the CLI code at the moment:

firebase-tools/src/frameworks/index.ts

Line 442 in 753f032

    
           packageJson.dependencies["firebase-frameworks"] ||= FIREBASE_FRAMEWORKS_VERSION;

Let me know if that works!

JwillSDP · 2025-03-16T01:25:54Z

@leoortizz
I have updated my package.json. The ssr next js function has changed its error to app not initialized. I am using firebase v9 modular SDK. It looks like the server side is not initializing for the ssr function. When I checked the log of the function I got this

The log entry indicates that your Cloud Run service ssrv12elites is encountering an error because the default Firebase app hasn't been initialized before Firebase services are being used.

This could be due to several reasons, including:

Missing initializeApp() call: The initializeApp() function from the firebase-admin/app module may not be invoked in your Cloud Function code.
Incorrect initialization: The Firebase app may be initialized with invalid credentials or configuration.
Multiple initialization attempts: The Firebase app may be initialized more than once, leading to conflicts.
Outdated Firebase CLI: The Firebase CLI could be outdated, which results in the function code not being properly deployed.
To validate the root cause:

Examine your Cloud Run service's code (specifically the /app/events/page.js file) to ensure that initializeApp() is called correctly before any other Firebase service is used.
Verify that the Firebase project ID, API key, and application ID are valid.
Check for any logic that might be causing the Firebase app to be initialized multiple times.
Check the installed version of the Firebase CLI with firebase -V and compare it with the latest version. If it's outdated, update it by running npm install -g firebase-tools .

Here is my package json:

{
  "name": "next-app-template",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
    "format": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
    "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },
  "dependencies": {
    "@heroui/button": "2.2.9",
    "@heroui/code": "2.2.6",
    "@heroui/input": "2.4.9",
    "@heroui/kbd": "2.2.6",
    "@heroui/link": "2.2.7",
    "@heroui/listbox": "2.3.9",
    "@heroui/navbar": "2.2.8",
    "@heroui/react": "^2.6.14",
    "@heroui/snippet": "2.2.10",
    "@heroui/switch": "2.2.8",
    "@heroui/system": "2.4.6",
    "@heroui/theme": "2.4.5",
    "@react-aria/ssr": "3.9.7",
    "@react-aria/visually-hidden": "3.8.18",
    "clsx": "2.1.1",
    "eslint-plugin-tailwindcss": "^3.18.0",
    "firebase": "^11.4.0",
    "firebase-admin": "^12.7.0",
    "firebase-functions": "^6.3.2",
    "firebase-tools": "^13.34.0",
    "framer-motion": "11.13.1",
    "google-auth-library": "^9.15.0",
    "googleapis": "^144.0.0",
    "intl-messageformat": "^10.5.0",
    "next": "^15.2.0-canary.57",
    "next-themes": "^0.4.4",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-error-boundary": "^5.0.0",
    "usehooks-ts": "^3.1.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^15.0.4",
    "@react-types/shared": "3.25.0",
    "@types/node": "20.5.7",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "@typescript-eslint/eslint-plugin": "^8.11.0",
    "@typescript-eslint/parser": "^8.11.0",
    "autoprefixer": "10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "15.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "postcss": "8.4.49",
    "prettier": "3.3.3",
    "tailwind-variants": "0.1.20",
    "tailwindcss": "3.4.16",
    "typescript": "5.6.3"
  }
}

Here is my Client app SDK:

// config/firebaseClient.tsx
import { initializeApp, getApp, getApps } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { getFunctions } from 'firebase/functions';
import { getMessaging, isSupported as isMessagingSupported } from 'firebase/messaging';
import { getAnalytics, isSupported as isAnalyticsSupported } from 'firebase/analytics';

// FIREBASE CONFIGURATION

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// APP INITIALIZATION

const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();


// APP SDK SERVICES

const auth = getAuth(app);

const db = getFirestore(app);
const storage = getStorage(app);
const functions = getFunctions(app);
const analytics = isAnalyticsSupported().then((yes) => (yes ? getAnalytics(app) : null));
const messaging = isMessagingSupported().then((yes) => (yes ? getMessaging(app) : null));

// APP EXPORTS

export { auth, db, storage, analytics, messaging, functions };

Here is my Server app SDK:

// config/firebaseServer.tsx
import { cert, getApp, getApps, initializeApp } from 'firebase-admin/app';
import { getAuth, Auth } from 'firebase-admin/auth';
import { getFirestore, Firestore } from 'firebase-admin/firestore';
import { getStorage, Storage } from 'firebase-admin/storage';

const serviceAccount: {} = JSON.parse(process.env.FIREBASE_ADMIN_CREDENTIALS || '{}');

const app =
  getApps().length > 0
    ? getApp()
    : initializeApp({
        credential: cert(serviceAccount),
      });

const auth: Auth = getAuth(app);
const db: Firestore = getFirestore(app);
const storage: Storage = getStorage(app);

export { auth, db, storage };

leoortizz · 2025-03-17T12:27:49Z

Thanks for the feedback. I'm closing this since the error reported in this issue is fixed. Your new issue is being discussed in #8244, we can continue there

JwillSDP added the type: bug label Feb 24, 2025

aalej added the integration: web frameworks label Feb 24, 2025

leoortizz added the Needs: Author Feedback Issues awaiting author feedback label Mar 14, 2025

google-oss-bot added Needs: Attention and removed Needs: Author Feedback Issues awaiting author feedback labels Mar 16, 2025

leoortizz closed this as completed Mar 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server Function firebase creates for next js gives Error #8249

Server Function firebase creates for next js gives Error #8249

JwillSDP commented Feb 24, 2025

JwillSDP commented Feb 24, 2025

JwillSDP commented Feb 24, 2025

leoortizz commented Mar 14, 2025 •

edited

Loading

JwillSDP commented Mar 16, 2025 •

edited

Loading

leoortizz commented Mar 17, 2025

Server Function firebase creates for next js gives Error #8249

Server Function firebase creates for next js gives Error #8249

Comments

JwillSDP commented Feb 24, 2025

[REQUIRED] Environment info

[REQUIRED] Test case

[REQUIRED] Steps to reproduce

[REQUIRED] Expected behavior

[REQUIRED] Actual behavior

JwillSDP commented Feb 24, 2025

JwillSDP commented Feb 24, 2025

leoortizz commented Mar 14, 2025 • edited Loading

JwillSDP commented Mar 16, 2025 • edited Loading

leoortizz commented Mar 17, 2025

leoortizz commented Mar 14, 2025 •

edited

Loading

JwillSDP commented Mar 16, 2025 •

edited

Loading