v9 export issues with Vite

[abdo643-HULK]

[REQUIRED] Describe your environment
Operating System version: macOS 11
Browser version: Safari 14
Firebase SDK version: 9
Firebase Product: all

[REQUIRED] Describe the problem

I am working with SvelteKit which uses Vite for bundling and I am not sure if it's the firebase "export * from '@firebase/app';" or if it's Vite. But when importing firebase like this "import { initializeApp } from 'firebase/app';" Vite says it's a commonjs package. If it's a dev depencency and trying to build it reports as followed:

> Named export 'initializeApp' not found. The requested module 'firebase/app' 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/app';
const { initializeApp } = pkg;

For the dev server it works fine. When installing firebase as a normal dependency and running build everything works fine but when trying to run the dev server this error pops up:

12:45:52 [vite] Error when evaluating SSR module /node_modules/firebase/app/dist/index.cjs.js:
ReferenceError: exports is not defined
    at eval (/node_modules/firebase/app/dist/index.cjs.js:5:23)
    at instantiateModule (/Users/abdo/Downloads/svelte-firebase-error-master/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
exports is not defined
ReferenceError: exports is not defined
    at eval (/node_modules/firebase/app/dist/index.cjs.js:5:23)
    at instantiateModule (/Users/abdo/Downloads/svelte-firebase-error-master/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)

Like I said I am not sure if it's because of the all export or if it's Vite but changing the "import { initializeApp } from 'firebase/app';" to "import { initializeApp } from '@firebase/app';" doesn't throw an error in both cases.

[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.

[haoqunjiang]

Oops, my previous comment is also out-of-date.

The real issue here is that Vite failed to automatically externalize firebase v9 during SSR.

---

For the Vite issue here, because it can be worked around by configuring ssr.externals, I'd say it's more like an inconvenience than a bug.
It's the "automated SSR externalization heuristics" that lead to the wrong outputs in the firebase case.
But these heuristics aren't guaranteed to always work. That's exactly why manual options like ssr.externals exist.

I'll try to improve the heuristics anyway.

[haoqunjiang]

Workaround:

svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: {
			ssr: {
				external: ['firebase']
			}
		}
	},
};

export default config;

[Eugeniegrandit]

This workaround works perfectly well, thank you @sodatea!

[abdo643-HULK]

Workaround:

svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		vite: {
			ssr: {
				external: ['firebase']
			}
		}
	},
};

export default config;

It works on the dev server but it throws the commonjs error when you try to build the project

[akauppi]

It works on the dev server but it throws the commonjs error when you try to build the project

A long while back, i decided against Vite for production build and went with Rollup, instead. Things likely have changed, but that’s a suitable and proven workflow. Note that Vite uses Rollup underneath, so it’s just bypassing one layer. The downside? More custom configuration is needed.

Watching this space. If you manage to get Firebase modular + Vite builds working, I might reconsider my choice.

[abdo643-HULK]

It works on the dev server but it throws the commonjs error when you try to build the project

A long while back, i decided against Vite for production build and went with Rollup, instead. Things likely have changed, but that’s a suitable and proven workflow. Note that Vite uses Rollup underneath, so it’s just bypassing one layer. The downside? More custom configuration is needed.

Watching this space. If you manage to get Firebase modular + Vite builds working, I might reconsider my choice.

It works but you have to change all "import {} from 'firebase/..'" to "import {} from '@firebase/..'". Internally the first import just does a "export * from '@firebase/..'".

[haoqunjiang]

It works on the dev server but it throws the commonjs error when you try to build the project

Well, this one gets a little bit tricky.
It's not a Vite issue in this case.
SvelteKit emits ES modules for SSR outputs (by default Vite would output CommonJS for SSR targets for best compatibility). So it expects all external dependencies to support ESM exports. However, firebase v9 have the following lines in its exports field:

"./app": {
 "node": "./app/dist/index.cjs.js",
 "default": "./app/dist/index.esm.js"
}

which means, in Node firebase/app always redirects to firebase/app/dist/index.cjs.js, and in other environments, it's firebase/app/dist/index.esm.js.

Apparently, the CJS bundle isn't statically analyzable, thus no named exports available to the users.

[haoqunjiang]

I don't know if SvelteKit supports emitting CJS bundles for SSR. If it does, the abovementioned workaround should suffice.

If not, I think the issue needs to be addressed in firebase.

[haoqunjiang]

For the firebase team, there are several ways to fix this issue:

1. The easy fix: pin the Rollup version to ~2.38 when building the firebase package.
   It's the same problem as Cant import on node using native ESModules (.mjs) (3.0.6) vuejs/core#3332, which is actually a bug in cjs-module-lexer. Pinning the Rollup version can circumvent it. After this change the CJS exports would become statically analyzable by Node.js, so that named exports will be available when imported from an ES module.

2. The more robust fix: instead of only supporting node and default, it should add import and require conditions too:

"./app": {
  "node": {
    "import": "./app/dist/index.mjs",
    "require": "./app/dist/index.cjs"
  }
  "default": "./app/dist/index.mjs"
}

Note that the extensions need to be changed accordingly.