T
TanStack•6mo ago
metropolitan-bronze

Lazy loading component: `Error in renderToPipeableStream: ReferenceError: window is not defined`

When loading that component: 
import { Suspense, lazy } from "react";

export const Bubble = lazy(() =>
  import("@typebot.io/react").then((m) => ({ default: m.Bubble })),
);

export const TypebotBubble = () => (
  <Suspense fallback={<div className="size-12" />}>
    <Bubble
      typebot="typebot-demo"
      theme={{
        position: "static",
        chatWindow: {
          maxHeight: "400px",
        },
      }}
    />
  </Suspense>
);
import { Suspense, lazy } from "react";

export const Bubble = lazy(() =>
  import("@typebot.io/react").then((m) => ({ default: m.Bubble })),
);

export const TypebotBubble = () => (
  <Suspense fallback={<div className="size-12" />}>
    <Bubble
      typebot="typebot-demo"
      theme={{
        position: "static",
        chatWindow: {
          maxHeight: "400px",
        },
      }}
    />
  </Suspense>
);
I get this error: Error in renderToPipeableStream: ReferenceError: window is not defined I'd expect since I am lazy loading it, the server would know that it shouldn't be rendered on server side so I am confused 🤔
4 Replies
deep-jade
deep-jade•6mo ago
hm I think this also executes on the server
deep-jade
deep-jade•6mo ago
you would need to either set ssr:false for that route, or use a component wrapper like this: https://github.com/sergiodxa/remix-utils/blob/main/src/react/client-only.tsx
GitHub
remix-utils/src/react/client-only.tsx at main · sergiodxa/remix-utils
A set of utility functions and types to use with Remix.run - sergiodxa/remix-utils
metropolitan-bronze
metropolitan-bronzeOP•6mo ago
OK good to know thank you so much! What worked for me, also wrapping it with Suspense: 
import { useHydrated } from "@/hooks/useHydrated";
import { type ReactNode, Suspense } from "react";

type Props = {
  children: ReactNode;
  fallback?: ReactNode;
};

export function ClientOnly({ children, fallback = null }: Props) {
  return (
    <Suspense fallback={fallback}>
      {useHydrated() ? children : fallback}
    </Suspense>
  );
}
import { useHydrated } from "@/hooks/useHydrated";
import { type ReactNode, Suspense } from "react";

type Props = {
  children: ReactNode;
  fallback?: ReactNode;
};

export function ClientOnly({ children, fallback = null }: Props) {
  return (
    <Suspense fallback={fallback}>
      {useHydrated() ? children : fallback}
    </Suspense>
  );
}
manual-pink
manual-pink•4mo ago

Did you find this page helpful?