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

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

TanStack•12mo ago•

5 replies

wispy-olive

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads