Env Variables are not being loaded using Cloudflare and TanstackStart

[jvitormelo]

I'm trying to deploy my tanstack Start project to Cloudflare, and I'm having this error:

The app runs and builds locally without any problem, I followed the https://tanstack.com/start/latest/docs/framework/react/hosting#cloudflare-pages documentation

This is app.config.ts, and I'am using Vinxi to build and start the app

import { defineConfig } from '@tanstack/react-start/config';
import { cloudflare } from 'unenv';
import contentCollections from '@content-collections/vinxi';
import viteTsConfigPaths from 'vite-tsconfig-paths';
import tailwindcss from '@tailwindcss/vite';
import { generateSitemap } from 'tanstack-router-sitemap';
import { sitemap } from './src/lib/sitemap';

const config = defineConfig({
	server: {
		preset: 'cloudflare-pages',
		unenv: cloudflare,
		prerender: {
			routes: ['/', '/timelines', '/terms', '/privacy', '/blog', '/rss/xml'],
			crawlLinks: true,
		},
		hooks: {
			'prerender:routes': async (routes: Array<string>) => {
				console.log('Original routes:', routes);
				process.env.PRERENDER = 'TRUE';
				try {
					const { getBlogPostsForBuild } = await import(
						'./src/lib/blog-utils'
					);
					const blogRoutes = (await getBlogPostsForBuild()).map(
						(post) => `/blog/${post.slug}`,
					);
					const allRoutes = [...routes, ...blogRoutes];
					console.log('Added blog routes:', blogRoutes);
					console.log('Total routes to prerender:', allRoutes.length);
					return allRoutes;
				} catch (error) {
					console.log(
						'Content collections not yet available, using base routes only',
					);
					return routes;
				}
			},
		},
	},
	tsr: {
		appDirectory: 'src',
	},
	vite: {
		plugins: [
			contentCollections(),
			viteTsConfigPaths({
				projects: ['./tsconfig.json'],
			}),
			tailwindcss(),
			generateSitemap(sitemap),
		],
	},
});

export default config;

This is my env ( i was using t3 env, but i changed to test if would work without it)

import { z } from 'zod';

const serverEnvSchema = z.object({
	DATABASE_URL: z.string(),
	VERCEL_PROJECT_PRODUCTION_URL: z.string(),
	DEV: z.coerce.boolean(),
	PROD: z.coerce.boolean(),
	PORT: z.coerce.number().optional(),
	SPOTIFY_CLIENT_ID: z.string(),
	SPOTIFY_CLIENT_SECRET: z.string(),
	YOUTUBE_API_KEY: z.string(),
	RESEND_API_KEY: z.string(),
	STRIPE_SECRET_KEY: z.string(),
	TIMELINE_PRICE_ID: z.string(),
	SUPABASE_SERVICE_ROLE_KEY: z.string(),
});

const browserEnvSchema = z.object({
	VITE_PUBLIC_POSTHOG_KEY: z.string(),
	VITE_PUBLIC_POSTHOG_HOST: z.string().url(),
	VITE_PUBLIC_DEV: z.coerce.boolean(),
	VITE_PUBLIC_PROD: z.coerce.boolean(),
	VITE_PUBLIC_SUPABASE_URL: z.string().url(),
	VITE_PUBLIC_SUPABASE_ANON_KEY: z.string(),
});

const getServerRuntimeEnv = () => {
	return {
		DATABASE_URL: process.env.DATABASE_URL,
		DEV: import.meta.env.DEV,

		VERCEL_PROJECT_PRODUCTION_URL:
			import.meta.env.VERCEL_PROJECT_PRODUCTION_URL ||
			process.env.VERCEL_PROJECT_PRODUCTION_URL,
		PORT: import.meta.env.PORT || process.env.PORT,
		SPOTIFY_CLIENT_ID: process.env.SPOTIFY_CLIENT_ID,
		SPOTIFY_CLIENT_SECRET: process.env.SPOTIFY_CLIENT_SECRET,
		YOUTUBE_API_KEY: process.env.YOUTUBE_API_KEY,
		RESEND_API_KEY: process.env.RESEND_API_KEY,
		STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
		TIMELINE_PRICE_ID: process.env.TIMELINE_PRICE_ID,
		SUPABASE_SERVICE_ROLE_KEY: process.env.SUPABASE_SERVICE_ROLE_KEY,
	};
};

const getBrowserRuntimeEnv = () => {
	return {
		VITE_PUBLIC_POSTHOG_KEY: import.meta.env.VITE_PUBLIC_POSTHOG_KEY,
		VITE_PUBLIC_POSTHOG_HOST: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
		VITE_PUBLIC_DEV: import.meta.env.DEV,
		VITE_PUBLIC_PROD: import.meta.env.PROD,
		VITE_PUBLIC_SUPABASE_URL: import.meta.env.VITE_PUBLIC_SUPABASE_URL,
		VITE_PUBLIC_SUPABASE_ANON_KEY: import.meta.env
			.VITE_PUBLIC_SUPABASE_ANON_KEY,
	};
};

const parseServerEnv = () => {
	if (typeof window !== 'undefined') return {} as ServerEnv;

	const isPrerendering = process.env.PRERENDER === 'TRUE';

	if (isPrerendering) {
		console.warn(
			'⚠️ Skipping server environment validation during prerendering',
		);
		return {} as ServerEnv;
	}

	const runtimeEnv = getServerRuntimeEnv();

	try {
		return serverEnvSchema.parse(runtimeEnv);
	} catch (error) {
		console.error('❌ Invalid server environment variables:');
		if (error instanceof z.ZodError) {
			error.errors.forEach((err) => {
				console.error(`  ${err.path.join('.')}: ${err.message}`);
			});
		}
		throw new Error('Server environment validation failed');
	}
};

const parseBrowserEnv = () => {
	const runtimeEnv = getBrowserRuntimeEnv();

	try {
		return browserEnvSchema.parse(runtimeEnv);
	} catch (error) {
		console.error('❌ Invalid browser environment variables:');
		if (error instanceof z.ZodError) {
			error.errors.forEach((err) => {
				console.error(`  ${err.path.join('.')}: ${err.message}`);
			});
		}
		throw new Error('Browser environment validation failed');
	}
};

export const serverEnv = parseServerEnv();
export const browserEnv = parseBrowserEnv();

export const env = { ...serverEnv, ...browserEnv };