Skip to content

@clickhouse/click-ui breaks SSR in Next.js (ReactCurrentDispatcher undefined) #632

@Montana

Description

@Montana

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions