Explicit SSR Imports

Is your feature request related to a problem? Please describe. In short, the issue here is caused by how SSR is generated and bundled. When import client side libraries such as firebase or js-cookie I have found that the site does not run because the client libraries are still being imported into the server runtime resulting in SSR errors.

Describe the solution you’d like Ideally there would be a vite extension that can interpret imports accordingly such that the imports can be top level like they are in sapper. From my experience I did not have this issue when using Sapper, only with sveltekit.

Describe alternatives you’ve considered One possible alternative would be to have a config file where you can explicitly declare which imports are server and which imports are client side. Not really sure how the sapper stack handled it but I could not reproduce a similar issue with sapper.

How important is this feature to you? This feature is not direly important, but it is a quality of life feature and most developers might be confused by the inability for them to easily import modules at the top level of their script blocks without causing various warnings or errors.

[DrewRidley]

I am not necessarily referencing a true SPA scenario. I was thinking something more along the lines of sapper. I still want SSR to be enabled, but I would like certain imports that are client-only to still feel natural. I can look into the how the vite plugin works and its possible this can be adapted to be added. I understand that vite is very different from rollup so I dont know how feasible it is.

[jthegedus]

@cupcakearmy It depends on the Firebase modules you are using. firebase/firestore, which most people are using, doesn’t have a dependency on IDBIndex so aren’t facing this issue.

~This is feedback the Firebase team would like to receive. I have observed the IDBIndex error you report when trying to use the firebase/performance module.~

~The vite.optimizeDeps.include[] config doesn’t resolve the issue.~

Also of note, the latest npm v9 SDK has changed from firebase@exp to firebase@beta

---

Update: it works when you dynamically import the library.

// $lib/firebaseClient.js
import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

const app = initializeApp({
	...
});

function performance() {
	return getPerformance(app);
}

export { performance };

<script>
	import { browser } from "$app/env";
	import { onMount } from "svelte";

	// this does not work
	// import { performance } from "$lib/firebaseClient"

	let perf;

	onMount(async () => {
		if (browser) {
			// this works
			const firebaseClient = await import("$lib/firebaseClient");
			perf = firebaseClient.performance(); // this initialises the perf-mon module.
		}
	})	
</script>

The key thing here is that firebaseClient and thus, firebase/performance is not imported and evaluated until the required window.db is available.

An alternative is to push the await import() into firebaseClient

// $lib/firebaseClient.js
import { initializeApp } from "firebase/app";

const app = initializeApp({
	...
});

async function performance() {
	const perf = await import("firebase/performance");
	return perf.getPerformance(app);
}

export { performance };

<script>
	import { browser } from "$app/env";
	import { onMount } from "svelte";
	import { performance } from "$lib/firebaseClient"

	let perf;

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