Tanstack Start Session Issues: useSyncExternalStoreWithSelector

[jakeklassen]

I am attempting to leverage an app session (like in the examples) to store a captcha text challenge upon loading of a page - using loader.

Here's a simple code breakdown:

// session.ts
import { useSession } from '@tanstack/react-start/server';

interface Session {
	contactCaptchaText: string | null;
}

export function useAppSession() {
	if (!process.env.SESSION_PASSWORD) {
		throw new Error('SESSION_PASSWORD is not set');
	}

	return useSession<Session>({
		password: process.env.SESSION_PASSWORD,
	});
}

// lib/server/contact.ts
export const getContactCaptchaFn = async () => {
	const session = await useAppSession();

	const { captcha, buffer } = await generateCaptcha();

	await session.update({
		contactCaptchaText: captcha.text,
	});

	const response = {
		captchaChallenge: captcha.text,
		captchaImageUrl: `data:image/png;base64,${buffer.toString('base64')}`,
	};

	return response;
};

// routes/captcha-test.tsx
import { getContactCaptchaFn } from '@/lib/server/contact';
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/captcha-test')({
	component: RouteComponent,
	loader: () => getContactCaptchaFn(),
});

function RouteComponent() {
	const { captchaImageUrl } = Route.useLoaderData();

	return <img src={captchaImageUrl} alt="Captcha" />;
}

The image loads fine, but whenver I use sessions this way I see this error in the Chrome console:

index.js?v=4198f782:1 Uncaught (in promise) SyntaxError: The requested module '/@fs/home/path/to/project/node_modules/.pnpm/[email protected][email protected]/node_modules/use-sync-external-store/shim/with-selector.js?v=4198f782' does not provide an export named 'useSyncExternalStoreWithSelector' (at index.js?v=4198f782:1:10)

If I update getContactCaptchaFn() and remove the session related code, no error.

Could someone help me understand what I might be doing wrong here?