ESM entry points are important in an ESM bundler world

[jthegedus]

Examples in the documentation (https://modular-admin.web.app/) instruct use of the new modular imports. This causes confusion to users when using an ESM bundled tool, such as https://kit.svelte.dev/ (which is powered by https://vitejs.dev/ for both Web client-side bundling and SSR server-side bundling), which uses named ESM imports, because of the lack of note about ESM-CJS interop in that documentation site. The GitHub issues #1230 explains the situation

Can I use it with native ESM modules?
The Admin SDK is still shipped as a CommonJS (CJS) package, and currently doesn’t provide any ESM entry points. You can still use it with native ESM code (available in Node 12 and up), but you will have to use the ESM-CJS interop mode. This means you will not be able to use named imports. Let us know how important this use case is for your applications, and we can certainly revisit this topic in our next development iterations.

This confusion is compounded people because the Client SDK is moving to be modular and ESM friendly, so when looking strictly at the https://modular-admin.web.app/ docs page we get no indication that ESM-CJS interop mode is required for usage in ESM server environments.

Futher, the docs https://modular-admin.web.app/ state:

We plan to support both the old namespace-centric API and the new modular API side-by-side for at least a year. So if you are not ready to migrate yet, you don’t have to do anything, and your existing code will just continue to work. But we do urge developers to migrate to the new modular API as soon as possible, since we want to be able to discontinue namespaces in the Admin SDK at some point.

Does this then suggest that the ESM-CJS interop will no longer be needed at some point?

Let us know how important this use case is for your applications, and we can certainly revisit this topic in our next development iterations.

ESM entry points are extremely important for the:

• new ESM-based web development tooling, where Firebase Admin SDKs would be used in ESM-packaged Node.js environments, eg: SvelteKit Endpoints
• alignment with the Client SDK which is moving to modular imports

In the meantime, including the ESM-CJS interop in the docs site would reduce confusion.

If anything was unclear, or I misunderstood, please let me know 😃

[hiranya911]

It's already been implemented at #1249

[jthegedus]

Is this released in "firebase-admin": "^9.100.0-alpha.0"? Because I have issues consuming ESM imports with Vite.js SSR (Node.js runtime target)

[hiranya911]

It's not released into NPM yet. I can push an alpha.1 release later this week or next if you want to give it a try. You can also try building directly from the modular-sdk branch.

npm install & npm run build & npm pack

[jthegedus]

It's not released into NPM yet

That hopefully explains my issues. A plublished alpha would be great!

[akauppi]

I'd also be testing this once alpha.1 is out.

[hiranya911]

I've published an alpha.1 release to the exp tag. Haven't updated the modular-admin site yet about ESM support (will work on it later), but you should be able to try out ESM with Node.js 12+ using this latest alpha build. Please let us know how it goes.

To install:

npm install firebase-admin@exp

Sample code:

import { initializeApp } from 'firebase-admin/app';
import { getAuth } from 'firebase-admin/auth';

initializeApp();
(async () => {
  const token = await getAuth().createCustomToken('alice');
  console.log(token);
})();

Also note that the Firebase Functions environment does not support ESM. So you cannot use ESM entry points in your cloud functions.

[jthegedus]

The issue with SvelteKit (Vite.js) is with resolving firebase-admin/app during bundling SSR resources:

Cannot find module 'firebase-admin/app'

This continues to work:

import admin from "firebase-admin" 

[hiranya911]

I'm not familiar with Vite. My guess would be that their module resolution doesn't support packages with multiple entry points. We have already defined our entry points in our package.json file as exports. It seems Vite ignores all that and only recognizes the main entry point (i.e. the old firebase-admin export).

[jthegedus]

I use the client SDK in SvelteKit (Vite.js) with the new modular API:

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

It must be an effect specific to the SSR resource bundling 🤔

[hiranya911]

@jthegedus would you like to file a bug in the Vite project, and reference this discussion? If there's anything we can do on our end to support use cases like this, we are certainly happy to do so.

[jthegedus]

Vite.js SSR is a feature meant for framework developers, like those of SvelteKit. I will look a producing a minimal reproduction and report there.