Firebase SDK 9 won't build with `adapter-static`

Describe the bug

When trying to use Firebase SDK 9, as per the recommendations on SvelteKit docs, the library initially will not work. One can make it work by adding vite.ssr.external: ["firebase"]. However, this only works for dev, and trying to run npm run build with adapter set to adapter-static, gives the error described in the logs section below.

Reproduction

To reproduce:

1. Initialize SvelteKit:

npm init svelte@next firebase-app

1. Add firebase 9 SDK

npm i firebase@9.0.0-beta.6

1. In any page or component, try the following:

import { initializeApp, getApps } from 'firebase/app';
import { onAuthStateChanged, getAuth, signOut, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

Just importing these functions should produce the error, though I’ll continue just a bit.

const firebaseConfig = /* config file */

const firebaseApp = initializeApp(firebaseConfig);

const auth = getAuth(firebaseApp);
signInWithPopup(auth, new GoogleAuthProvider());

1. Try in development…should work, unless I made a silly mistake somewhere above…😉

npm run dev

1. Try building, should fail.

npm run build

Logs

> Using @sveltejs/adapter-static
> Named export 'GoogleAuthProvider' not found. The requested module 'firebase/auth' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'firebase/auth';
const { getAuth, signOut, signInWithPopup, GoogleAuthProvider, onAuthStateChanged } = pkg;

file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:3
import { getAuth, signOut, signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
                                            ^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'GoogleAuthProvider' not found. The requested module 'firebase/auth' is a CommonJS module, which may not support all module.exports as named exports.        
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'firebase/auth';
const { getAuth, signOut, signInWithPopup, GoogleAuthProvider, onAuthStateChanged } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async prerender (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:80:14)
    at async Object.prerender (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:312:5)
    at async adapt (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/adapter-static/index.js:17:4)
    at async adapt (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:338:2)
    at async file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/cli.js:905:5

Special Note

Trying to follow the advice proviced by the error message doesn’t help either:

import * as app from ‘firebase/app’; const { initializeApp, getApps } = app; import * as authPkg from ‘firebase/auth’; const { onAuthStateChanged, getAuth, signOut, signInWithPopup, GoogleAuthProvider } = authPkg;

Gives the following:

Using @sveltejs/adapter-static TypeError: getApps is not a function at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:324:23
at Object.$$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:384:52
at Object.$$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:158:78
at $$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at Object.render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:93:20) at render_response (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:379:28) at async respond$1 (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:1187:10) at async render_page (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:1230:20) TypeError: getApps is not a function at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:324:23
at Object.$$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:384:52
at Object.$$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:158:78
at $$render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:85:18) at Object.render (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/.svelte-kit/output/server/app.js:93:20) at render_response (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:379:28) at async respond_with_error (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:980:10) at async respond$1 (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/ssr.js:1199:10) 500 / Error: 500 / at error (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:94:11) at visit (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:176:5) at async prerender (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:245:5) at async Object.prerender (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:312:5) at async adapt (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/adapter-static/index.js:17:4) at async adapt (file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/chunks/index6.js:338:2) at async file:///C:/Dev/Commercial/Importadora%20Queara/system/app-web-desktop/node_modules/@sveltejs/kit/dist/cli.js:905:5

System Info

Using the latest version of everything:
- `SvelteKit: next`
- `svelte-adapter: 1.0.0-next.13`
- `node: v16.5.0`
- `npm: 7.19.1`

Severity

blocking an upgrade

Additional Information

Marked as blocking an upgrade because without being able to build, cannot test on deployments or other platforms.

[jquesada2016]

@Conduitry This is actually not the same issue. I didn’t include the @firebase/... in the code above, but doing so still doesn;t solve the problem

[deom-dev]

Maybe it’s cause of es2015 ? (Saw in your svelte.config.js