AppHosting Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

[APNAX]

Operating System

macOS 14.5

Environment (if applicable)

NextJS 15

Firebase SDK Version

12.2.1

Firebase SDK Product(s)

Auth

Project Tooling

I'm using NextJS with Firebase on app hosting. I'm testing with firebase emulators:start --only apphosting

Detailed Problem Description

I'm trying to use the no-config initialization of Firebase as describe here: https://firebase.google.com/docs/app-hosting/firebase-sdks#initialize-with-no-arguments. However it always fails during apphosting emulator testing with the error Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

I even tried to specify the configuration during Firebase install (FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase) however this also doesn't work. I checked the generated files where the config should be stored and they just look like this:

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.getDefaultsFromPostinstall = () => (undefined);

I guess, instead of undefined there should be my configuration.

Why can't NPM get the config during post install? And how should this normally work because if I understand the manual correctly, it should even work without specifying any config env var during install or does this simply not work with NextJS?

Steps and code to reproduce issue

"use client";

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getRemoteConfig } from "firebase/remote-config";
import { getStorage } from "firebase/storage";

const firebaseApp = initializeApp();

export const auth = getAuth(firebaseApp);
export const firestore = getFirestore(firebaseApp);
export const remoteConfig = getRemoteConfig(firebaseApp);
export const storage = getStorage(firebaseApp);

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

I even tried to specify the configuration during Firebase install (FIREBASE_WEBAPP_CONFIG="{...}" npm install firebase) however this also doesn't work.

This is pretty close to working. The problem seems to be that the script called by NPM on postinstall runs in a separate subprocess from the npm install, so that variable doesn't exist in its scope. When I instead set the env variable globally using export:

export FIREBASE_WEBAPP_CONFIG="/my-directory/config.json"
npm install firebase

or if you're passing the json literally

export FIREBASE_WEBAPP_CONFIG="{\"appId\": \"whatever app id\"}"
npm install firebase

It seemed to work fine.

It might be less trouble to just manually pass the config into initializeApp when in development though? I realize that means you have to change your code before prod. In that case, just setting this env variable globally should work.

[APNAX]

Thanks, I tried this and now the config is correctly injected into the generated postinstall.(m)js files, however I still get the same error. Somehow Firebase can't get the config.

BTW I'm having the same issue with the firebase-admin sdk. According to the manual there it should also be possible to initialize the admin sdk without any config in apphosting with emulators.

[willbattel]

FWIW this also (unsurprisingly) affects the FirebaseServerApp initialization. Interestingly, I'm not having any trouble using auto-initialization for the admin SDK with the App Hosting emulator, but the initializeApp and initializeServerApp on the JS SDKs both throw Error [FirebaseError]: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

firebase: 12.2.1, firebase-admin: 13.5.0, firebase-tools: 14.6.0, next: 15.5.2

Deleting node_modules, exporting FIREBASE_WEBAPP_CONFIG manually, and reinstalling does seem to do the trick for me, but a more permanent fix would be much appreciated :)

[hsubox76]

Can you provide steps to reproduce? I created a NextJS app, installed firebase as I described above:

export FIREBASE_WEBAPP_CONFIG="/my-directory/config.json"
npm install firebase

and created a page.tsx that looks like this:

// also works if I remove "use client"
"use client";

import { initializeApp } from 'firebase/app';

const app = initializeApp();

export default function Home() {
  return (
    <div>hi: {app.options.projectId}</div>
  );
}

Then I initialized Firebase emulators for app hosting only and ran:

firebase emulators:start --only apphosting 

as you described. When I went to the page (localhost:5002) it had no errors and it displayed the projectId as expected.

Using export FIREBASE_WEBAPP_CONFIG only sets the variable in the terminal session that you are in. You would need to set it in your .bashrc (if working locally) to ensure it's set every time you open a new shell. If you didn't have it set previously, and installed firebase already, you may need to delete node_modules before running the install again (with the env variable set) because otherwise npm may see you haven't changed the firebase version and decide it doesn't have to do any installation, which would cause it to also not run the postinstall script.