fair-rose

Uncaught Promise (null)

On my production deployment I'm seeing an uncaught error due to null - Struggling to find where this might be coming from - looking at the source in the browser it's pointing to my index.html (dashboard:1). Any suggestions on things to look at that I might've misconfigured?

12 Replies

fair-roseOP•5mo ago

Here is my main.tsx:

import { RouterProvider, createRouter } from "@tanstack/react-router";
import React from "react";
import ReactDOM from "react-dom/client";

import { routeTree } from "./routeTree.gen";
import "./styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Loader2Icon } from "lucide-react";
import { useAuth } from "./providers/auth-context-provider";
import Providers from "./providers/providers";

const queryClient = new QueryClient();

// Set up a Router instance
const router = createRouter({
    routeTree,
    defaultPreload: "intent",
    scrollRestoration: true,
    context: {
        queryClient,
        auth: undefined, // This will be set after we wrap the app in AuthContextProvider
    },
});

// Register things for type-safety
declare module "@tanstack/react-router" {
    interface Register {
        router: typeof router;
    }
}

function InnerApp() {
    const auth = useAuth();

    // If the provider is initially loading, do not render the router
    if (auth.isInitialLoading) {
        return (
            <div className="flex h-screen w-full items-center justify-center p-4">
                <Loader2Icon className="size-10 animate-spin text-foreground" />
            </div>
        );
    }

    return <RouterProvider router={router} context={{ queryClient, auth }} />;
}

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Providers>
                <InnerApp />
            </Providers>
        </QueryClientProvider>
    );
}

// biome-ignore lint/style/noNonNullAssertion: <explanation>
const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
    );
}

import { RouterProvider, createRouter } from "@tanstack/react-router";
import React from "react";
import ReactDOM from "react-dom/client";

import { routeTree } from "./routeTree.gen";
import "./styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Loader2Icon } from "lucide-react";
import { useAuth } from "./providers/auth-context-provider";
import Providers from "./providers/providers";

const queryClient = new QueryClient();

// Set up a Router instance
const router = createRouter({
    routeTree,
    defaultPreload: "intent",
    scrollRestoration: true,
    context: {
        queryClient,
        auth: undefined, // This will be set after we wrap the app in AuthContextProvider
    },
});

// Register things for type-safety
declare module "@tanstack/react-router" {
    interface Register {
        router: typeof router;
    }
}

function InnerApp() {
    const auth = useAuth();

    // If the provider is initially loading, do not render the router
    if (auth.isInitialLoading) {
        return (
            <div className="flex h-screen w-full items-center justify-center p-4">
                <Loader2Icon className="size-10 animate-spin text-foreground" />
            </div>
        );
    }

    return <RouterProvider router={router} context={{ queryClient, auth }} />;
}

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Providers>
                <InnerApp />
            </Providers>
        </QueryClientProvider>
    );
}

// biome-ignore lint/style/noNonNullAssertion: <explanation>
const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
    );
}

eastern-cyan•5mo ago

The issue is not in the code you've shown here. Maybe you could provide a minimal reproduction?

fair-roseOP•5mo ago

Yeah, struggling to reproduce it myself, only happens on prod. Claude suggested it might be routes itself returning nulls before they're fully ready to render

rival-black•5mo ago

if it's only on prod then it's most likely the deployment that's the issue

fair-roseOP•5mo ago

Yeah - very well could be, it's deployed up on vercel currently, might try deploying elsewhere to see if it crops up. Where all do you generally deploy your tanstack router apps?

robust-apricot•5mo ago

does it only happen on deployed version or also locally when running a prod build?

fair-roseOP•5mo ago

ooh, great shout - will check soon, about to jump into a few meetings ooh, happening local with prod build too

fair-roseOP•5mo ago

robust-apricot•5mo ago

maybe something with initialization order. have you codesplitting enabled? if yes try disabling g

fair-roseOP•5mo ago

I do have it enabled, let me try disabling still happens - This is my vite config:

import path from "node:path";
import tailwindcss from "@tailwindcss/vite";
import viteReact from "@vitejs/plugin-react";

import { defineConfig } from "vite";

import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
            "@shared": path.resolve(__dirname, "./shared"),
        },
    },
    plugins: [
        TanStackRouterVite({ autoCodeSplitting: false }),
        viteReact(),
        tailwindcss(),
    ],
    test: {
        globals: true,
        environment: "jsdom",
    },
});

import path from "node:path";
import tailwindcss from "@tailwindcss/vite";
import viteReact from "@vitejs/plugin-react";

import { defineConfig } from "vite";

import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
            "@shared": path.resolve(__dirname, "./shared"),
        },
    },
    plugins: [
        TanStackRouterVite({ autoCodeSplitting: false }),
        viteReact(),
        tailwindcss(),
    ],
    test: {
        globals: true,
        environment: "jsdom",
    },
});

definitely seems something retrying over time - periodically pings the console Any other thoughts you think I should run down? 🙂 I haven’t been able to find it yet

robust-apricot•5mo ago

not without a reproducer

fair-roseOP•5mo ago

I ripped out my routes last night and this is still happening.. so continue to dig, might be able to reproduce it here soon hmmm, seems the example auth firebase no longer builds - Error [ERR_MODULE_NOT_FOUND]: Cannot find module '.../router/examples/react/authenticated-routes-firebase/node_modules/@tanstack/router-plugin/dist/esm/vite.js' imported from .../router/examples/react/authenticated-routes-firebase/node_modules/.vite-temp/vite.config.js.timestamp-1746191392395-c53b44a6fada7.mjs I'll try to investigate wth is going on with this to see if I can reproduce it hmmm.. okay - not happening in the sample project, time to peel the onion back 🙂 damn, just found the bit of code freaking TF out 🙂

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(import.meta.env.VITE_RECAPTCHA_SITE_KEY),
    isTokenAutoRefreshEnabled: true,
});

const appCheck = initializeAppCheck(app, {
    provider: new ReCaptchaV3Provider(import.meta.env.VITE_RECAPTCHA_SITE_KEY),
    isTokenAutoRefreshEnabled: true,
});

In my firebase config.ts- not sure why it's geeking out yet, but this was it. Literally had to rip everything out to find this needle haha

Gaming

Programming

Uncaught Promise (null)

Did you find this page helpful?