Add Explicit Support for React 19 in compat.ts

[arunph]

packages/bridge/bridge-react/src/provider/compat.ts

import ReactDOM from 'react-dom';
import { CreateRootOptions, Root } from '../types';

// ReactDOM.version is only available in React 16.13.0 and later
const isReact18 = ReactDOM.version?.startsWith('18');

/**
 * Creates a root for a container element compatible with both React 16 and 18
 */
export function createRoot(
  container: Element | DocumentFragment,
  options?: CreateRootOptions,
): Root {
  if (isReact18) {
    // For React 18, use the new createRoot API
    // @ts-ignore - Types will be available in React 18
    return (ReactDOM as any).createRoot(container, options);
  }

  // For React 16/17, simulate the new root API using render/unmountComponentAtNode
  return {
    render(children: React.ReactNode) {
      ReactDOM.render(children, container);
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

/**
 * Hydrates a container compatible with both React 16 and 18
 */
export function hydrateRoot(
  container: Element | DocumentFragment,
  initialChildren: React.ReactNode,
  options?: CreateRootOptions,
): Root {
  if (isReact18) {
    // For React 18, use the new hydrateRoot API
    // @ts-ignore - Types will be available in React 18
    return (ReactDOM as any).hydrateRoot(container, initialChildren, options);
  }

  // For React 16/17, simulate the new root API using hydrate/unmountComponentAtNode
  return {
    render(children: React.ReactNode) {
      // For the initial render, use hydrate
      if (children === initialChildren) {
        ReactDOM.hydrate(children, container);
      } else {
        // For subsequent renders, use regular render
        ReactDOM.render(children, container);
      }
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

Currently, compat.ts in bridge-react only checks for React 18 and falls back to the React 16/17 compatibility layer for other versions. However, React 19 introduces a breaking change where ReactDOM.createRoot must be imported from react-dom/client instead of react-dom. This is not accounted for in the existing implementation.

Expected Behavior: If React 19 is detected, ReactDOM.createRoot and ReactDOM.hydrateRoot should be properly imported from react-dom/client to avoid runtime errors.

Current Issue: The current isReact18 check does not account for React 19, which means React 19 users might experience unexpected behavior.

• [x] Read the docs.
• [x] Read the common issues list.
• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] Make sure this is a Module federation issue and not a framework-specific issue.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[danpeen]

@arunph Thank you. I will fix this.

[github-actions[bot]]

Stale issue message