1import React from "react";
2import ReactDOM from "react-dom/client";
3
4import "@fontsource-variable/inter";
5import "./index.css";
6
7import { hasCloudPublicConfig } from "./cloud/publicConfig";
8import { isElectron } from "./env";
9import { startAppServices } from "./appInit";
10import { AppRoot } from "./AppRoot";
11import { whenLocaleReady } from "./i18n/runtime";
12import { reloadOnceForChunkLoadError } from "./lib/chunkReloadGuard";
13
14const router = startAppServices();
15
16const clerkPublishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string | undefined;
17
18let reloadScheduled = false;
19window.addEventListener("vite:preloadError", (event) => {
20 if (reloadOnceForChunkLoadError()) {
21 reloadScheduled = true;
22 event.preventDefault();
23 }
24});
25
26const app = <AppRoot router={router} />;
27
28// Split by runtime to keep Clerk out of local startup and clerk-js out of browser builds.
29const managedAuthShellModule =
30 clerkPublishableKey && hasCloudPublicConfig()
31 ? isElectron
32 ? import("./components/clerk/ElectronManagedAuthShell")
33 : import("./components/clerk/BrowserManagedAuthShell")
34 : null;
35
36export const startup = Promise.all([
37 managedAuthShellModule?.then((module) => module.default) ?? null,
38 // Chained so settings have usually hydrated; English resolves without a chunk load.
39 router.load().then(whenLocaleReady),
40])
41 .then(([ManagedAuthShell]) => {
42 // Route chunk failures resolve router.load() and surface later through the error boundary.
43 if (reloadScheduled) return;
44 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
45 <React.StrictMode>
46 {ManagedAuthShell && clerkPublishableKey ? (
47 <ManagedAuthShell publishableKey={clerkPublishableKey}>{app}</ManagedAuthShell>
48 ) : (
49 app
50 )}
51 </React.StrictMode>,
52 );
53 })
54 .catch((error: unknown) => {
55 if (reloadScheduled) return;
56 throw error;
57 });