SvelteKit, Cloudflare & Firebase Errors

[boojum]

Describe the bug

When deploying SvelteKit app with basic Firebase initialisation to Cloudflare Pages I'm getting the following errors:

IDBIndex is not defined
ReferenceError: IDBIndex is not defined

After refreshing the browser window errors change to (NOTE: not a real web address):

Failed to fetch dynamically imported module: https://example.com/_app/undefined
TypeError: Failed to fetch dynamically imported module: https://example.com/_app/undefined

At the same time, in console I can see another error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "null". Strict MIME type checking is enforced for module scripts per HTML spec.

It is my understanding that the errors are caused by improper initialisation of Firebase. As I already wrap the initialisation in if (browser) and check Firebase's isSupported I'm not sure if the mistake is mine or is it a bug with sveltekit / cloudflare-adapter.

As locally everything is working just fine, I'm leaning towards an issue with cloudflare-adapter.

Reproduction

0. Create a Git[hub/lab] project to host the example.
1. Initialise skeleton project with npm init svelte@next
2. Install @sveltejs/adapter-cloudflare as a dev dependency.
3. Change @sveltejs/adapter-auto to @sveltejs/adapter-cloudflare in svelte.config.js.
4. Install firebase as a regular dependency.
5. Get your Firebase config from the Firebase Console.
6. Add to <script> tag of index.svelte:

<script >
	import { getApp, initializeApp } from 'firebase/app';
	import { getAnalytics, isSupported } from 'firebase/analytics';
	import { browser } from '$app/env';

	const firebaseConfig = { /* YOUR FIREBASE CONFIG */ };

	let app;

	if (browser) {
		try {
			app = getApp();
		} catch (error) {
			app = initializeApp(firebaseConfig);
			if (isSupported) getAnalytics(app);
		}
	}
</script>

7. Commit and push, observe the errors when Cloudflare deploys the app.

System Info

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1195G7 @ 2.90GHz
    Memory: 21.88 GB / 31.07 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.5.0 - /usr/bin/node
    npm: 8.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 97.0
  npmPackages:
    @sveltejs/adapter-cloudflare: next => 1.0.0-next.9 
    @sveltejs/kit: next => 1.0.0-next.269 
    svelte: ^3.44.0 => 3.46.4

Severity

blocking all usage of SvelteKit

Additional Information

No response

[he1d1]

This is kinda off-topic, but AFAIK you shouldn't put the firebase secrets in your index.svelte. I think the user can get that.

[krdonner]

I am experiencing similar issues with Netlify adapter.
Seems to be something when hydrating the<slot />element in __layout.svelte. Haven't pinpointed it exactly but when I remove the __layout.svelte file it seems to be working again.

[krdonner]

I get this from fiddler:

                     <script type="module">
				import { start } from "/_app/start-02ffb6ca.js";
				start({
					target: document.body,
					paths: {"base":"","assets":""},
					session: {},
					route: true,
					spa: false,
					trailing_slash: "never",
					hydrate: {
						status: 404,
						error: {name:"Error",message:"Not found: \u002F_app\u002Fundefined",stack:"Error: Not found: 
                                                \u002F_app\u002Fundefined"},
						nodes: [
							import("/_app/undefined"),
						import("/_app/error.svelte-5e055a15.js")
						],
						url: new URL("https://terskel.com/_app/undefined"),
						params: {}
					}
				});
			</script>

[benmccann]

Please provide a repository that reproduces this issue. From the issue template:

Explaining how to reproduce is generally not enough. It pushes the burden of creating a reproduction project onto a small set of volunteer maintainers and isn't scalable. If no reproduction is provided, the issue will be closed.

[CaptainCodeman]

This is kinda off-topic, but AFAIK you shouldn't put the firebase secrets in your index.svelte. I think the user can get that.

It's perfectly normal and expected for the client-side config to be exposed on the client, it's not secret and is required for Firebase to function. What would be bad is if any service-account credentials were exposed. These are typically used by firebase-admin on the server and give unlimited access to the project resources.

[CaptainCodeman]

I use firebase + SvelteKit a lot, I'm not seeing this issue. It's possible that it's TODO with the cloudflare adapter but your SvelteKit version is quite outdated by 25 releases so I'd start with updating that to confirm if it's still a live issue.

As well as the ,if (browser) { check you can also use dynamic imports to make sure that firebase client libs (which reference browser-only features like IndexedDB) only load on the client and can also be lazy-loaded so they don't slow-down app startup (good for Lighthouse and Core Web Vitals scores).

In case it helps, I tried to explain this approach here:
https://www.captaincodeman.com/lazy-loading-firebase-with-sveltekit

[benmccann]

This seems likely to be an issue in Firebase: firebase/firebase-js-sdk#6042. Closing in favor of that issue since it's not clear that there's anything to do in SvelteKit