evanweible-wf

Emotion + Streaming SSR + Suspense

Note: This document describes a workaround for a known limitation in Emotion's handling of React 18+ streaming SSR with Suspense. This should be considered a temporary fix until Emotion or the React ecosystem provides first-class support.

The Problem

Hydration mismatch errors occur when using Emotion (or Emotion-based libraries like Material-UI, Chakra UI) with React 18+ streaming SSR and Suspense boundaries.

Root Cause

becca-bailey

type AAndB = {
  a: string;
  b: string;
};

type Neither = {
  someOtherProp: string;
};

type Props = AAndB | Neither;