The requested module 'firebase/app' is expected to be of type CommonJS, which does not support named exports

Describe the bug I decided to use v9 of the Firebase API.

The biggest change to v8 is that you no longer need to load all the Firebase JS but just the functions that you are going to use.

Instead of

import firebase from "firebase/app"

it is called by

import { initializeApp } from 'firebase/app';

In development this works fine however when running the build with the Svelte adapter I get the following error:

> Using svelte-adapter-firebase
> The requested module 'firebase/app' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'firebase/app';
const {getApp, initializeApp} = pkg;
file:///var/www/svelte/.svelte-kit/output/server/app.js:6
import {getApp, initializeApp} from "firebase/app";

To Reproduce Steps to reproduce the behavior:

1. Initiate an App with v9 logic
2. Run a build with svelte adapter 0.6.3

Expected behavior Being able to build without having to add something like import firebase from "firebase/app"

Additional context I do not know where this error is triggered but it seems related to the adapter. The initial svelte build does seem to work. With the support of ESMBuild in https://github.com/jthegedus/svelte-adapter-firebase/pull/39 you would expect that it should work but maybe there is a hardcoded check on firebase/app that it is CommonJS somewhere?

[jthegedus]

IDBIndex error still there if I put firebase in dependencies rather than devDependencies, I had the same problem with sapper using only devDependencies let it works

I’ve not had this issue. I have firebase in dependencies & firebase-admin in devDependencies (because it gets compiled into the SSR on build). The IDBIndex will happen when you try and even import the library at the top level.

Here is a snippet from an app:

// $lib/firebase/client.js
import { initializeApp, getApps } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const app = getApps().length === 0 ? initializeApp({...}) : getApps()[0];
function firestore() {
	return getFirestore(app);
}
async function performance() {
	const perf = await import('firebase/performance');
	return perf.getPerformance(app);
}
export { firestore, performance };

<!-- __layout.svelte -->
<script>
	import { performance } from '$lib/firebase/client';

	let perf;
	onMount(async () => {
		if (browser) {
			perf = await performance();
		}
	});
</script>

Importing firebase/firestore is fine at the top level, because that lib does not rely on Web deps.

firebase/performace is a different scenario, it relies on IDBIndex which is only available on the web.

The error happens when we import. When we import the file '$lib/firebase/client' the top-level import like firebase/firestore are evaluated. So we defer the imports that require web using the dynamic import. That way firebase/performance is only actually evaluated on function execution.

At least this is my current understanding.

From memory performance and auth are the two libs I have needed to do this. Though there could be more.

[sebmade]

thanks @jthegedus for this clear explanation it works now 👍 in fact I forgot “if (browser)” in an onMount() function, I was thinking it was only call on client side, but it’s not, it’s also use server side on prerendering : where the previous problem happened

IDBIndex error still there if I put firebase in dependencies rather than devDependencies, I had the same problem with sapper using only devDependencies let it works