-
Notifications
You must be signed in to change notification settings - Fork 14
Open
Description
I'm trying to use @clickhouse/click-ui in a Next.js 13+ project (app directory, server-side rendering), and I'm running into this SSR error:
TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
at (ssr)/./node_modules/@clickhouse/click-ui/dist/click-ui.es.js
at __webpack_require__
at eval (webpack-internal:///(ssr)/./components/Main.tsx:7:78)My thought was to do a dynamic import with SSR, so essentially I'd wrap any usage of @clickhouse/click-ui components with a dynamic import to prevent them from being rendered on the server:
import dynamic from 'next/dynamic';
const ClickhouseComponent = dynamic(() => import('./YourClickhouseComponent'), {
ssr: false,
});
export default ClickhouseComponent;That didn't work so I thought maybe I could lazy-load the entire component. Turns out you can’t lazy-load the whole component, or conditionally render anything using click-ui only on the client:
import { useEffect, useState } from 'react';
export default function Main() {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
if (!isClient) return null;
return (
<YourClickhouseComponent />
);
}It seems there's no ESM build compatible with SSR. Otherwise I'd just wrap any DOM/global access (window, document, React internals) in typeof window !== 'undefined'.
Thank You,
Michael.
Metadata
Metadata
Assignees
Labels
No labels