Add ClientMap wrapper to avoid lazy() SSR resolution
.client.tsx modules return undefined on the server, but lazy() still tries to resolve them during SSR causing "Element type is invalid". Replace lazy()+Suspense with a ClientMap component that dynamically imports the map only in useEffect (client-side only). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
81eb38a24d
commit
9b2adebc4d
5 changed files with 30 additions and 32 deletions
21
apps/journal/app/components/ClientMap.tsx
Normal file
21
apps/journal/app/components/ClientMap.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { useState, useEffect, type ComponentProps } from "react";
|
||||
|
||||
type MapProps = ComponentProps<typeof import("./RouteMapThumbnail.client").RouteMapThumbnail>;
|
||||
|
||||
export function ClientMap(props: MapProps) {
|
||||
const [Component, setComponent] = useState<React.ComponentType<MapProps>>();
|
||||
|
||||
useEffect(() => {
|
||||
import("./RouteMapThumbnail.client").then((m) => setComponent(() => m.RouteMapThumbnail));
|
||||
}, []);
|
||||
|
||||
if (!Component) {
|
||||
return (
|
||||
<div className={`flex items-center justify-center bg-gray-100 text-gray-500 ${props.className ?? "h-36 w-full rounded"}`}>
|
||||
Loading map...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <Component {...props} />;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue