9b2adebc4d
.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>
21 lines
661 B
TypeScript
21 lines
661 B
TypeScript
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} />;
|
|
}
|