Function Junction

CSS and JS must be loaded for error boundary (Remix)

11 May 20251 min read

In Remix, for a Error Boundary to load in properly, you have to make sure that CSS and JS are loaded. For that reason, you have to make sure that you create a Document component, that will have everything minus visual part (basically excluding <body> content).

function Document({ children }: PropsWithChildren) {  
	return (  
		<html lang="en" className="h-full overflow-x-hidden">  
			<head>  
				<Meta />  
				<meta charSet="utf-8" />  
				<meta name="viewport" content="width=device-width,initial-scale=1" />  
				<Links />  
			</head>  
			<body className="flex h-full flex-col justify-between bg-background text-foreground">  
				{children}  
			</body>  
		</html>  
	)  
}  
  
export function ErrorBoundary() {  
	return (  
		<Document>  
			<GeneralErrorBoundary />  
		</Document>  
	)  
}

Recent Notes

Backlinks