[React 19] Cannot assign to readonly property

[hipstersmoothie]

Summary

I'm using https://waku.gg to use react components. I was trying to upgrade to the latest 19 rc and I started getting getting this error:

I boiled down the app into just a few file to demonstrate the issue here

The issue is as follow:

// Client context Provider
import { StoryContextProvider } from "../../components/Context";
// Server Component
import A11yDecorator from "../../A11yDecorator";
// Client Component
import CenteredDecorator from "../../CenteredDecorator";

export default function Iframe() {
  const page = {};

  return (
    <StoryContextProvider value={{ page }}>
      <CenteredDecorator page={page}>
        <A11yDecorator page={page}>
          foo
        </A11yDecorator>
      </CenteredDecorator>
    </StoryContextProvider>
  );
}

Some observations:

• If I switch the order of A11yDecorator and CenteredDecorator, the app renders
• If I don't use a shared page variable and just pass objects to the relevant places, the app renders
• If I spread the page and make an new object when passing to the relevant places, the app renders

[eps1lon]

You should file this against Waku first to check if this is a framework or React issue. Waku may not be compatible with React 19 yet.

[hipstersmoothie]

I did. The example code is pretty light. I could potentially test against next.js too

cc @dai-shi

[dai-shi]

I originally thought it's a Waku's issue. But, as it turns out, it reproduces with changing React beta, without changing Waku.

@hipstersmoothie I would recommend to find which commit in React causes the error, and look for the background of the change. My gut feeling is that this change is intentional (for safety or something).

[eps1lon]

// Server Component
import A11yDecorator from "../../A11yDecorator";

This is a client component according to the repro: https://github.com/hipstersmoothie/waku-repro/blob/aec12ed7c9594950987157242f80cec86957a71e/src/A11yDecorator.tsx#L1

You probably mean CenteredDecorator which is a Server Component?

[eps1lon]

I can't repro this in React's test suite (#30194) but I can repro it in Next.js (https://github.com/eps1lon/waku-repro-as-nextjs):

TypeError: Cannot assign to read only property 'page' of object '#<Object>'
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2081:23)
    at wakeChunk (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1739:5)
    at initializeModelChunk (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1933:9)
    at getOutlinedModel (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2148:7)
    at parseModelString (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2404:18)
    at Array.eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:3260:14)
    at JSON.parse (<anonymous>)
    at parseModel (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:3252:15)
    at initializeModelChunk (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1918:17)
    at Chunk.then (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1643:7)

[unstubbable]

This would be a test in ReactFlightDOMBrowser-test.js that reproduces the issue:

it('should resolve deduped objects in nested children of blocked models', async () => {
  let resolveOuterClientComponentChunk;
  let resolveInnerClientComponentChunk;

  const ClientOuter = clientExports(
    function ClientOuter({children, value}) {
      return children;
    },
    '1',
    '/outer.js',
    new Promise(resolve => (resolveOuterClientComponentChunk = resolve)),
  );

  function PassthroughServerComponent({children}) {
    return children;
  }

  const ClientInner = clientExports(
    function ClientInner({children}) {
      return JSON.stringify(children);
    },
    '2',
    '/inner.js',
    new Promise(resolve => (resolveInnerClientComponentChunk = resolve)),
  );

  const value = {};

  function Server() {
    return (
      <ClientOuter value={value}>
        <PassthroughServerComponent>
          <ClientInner>{value}</ClientInner>
        </PassthroughServerComponent>
      </ClientOuter>
    );
  }

  const stream = await serverAct(() =>
    ReactServerDOMServer.renderToReadableStream(<Server />, webpackMap),
  );

  function ClientRoot({response}) {
    return use(response);
  }

  const response = ReactServerDOMClient.createFromReadableStream(stream);
  const container = document.createElement('div');
  const root = ReactDOMClient.createRoot(container);

  await act(() => {
    root.render(<ClientRoot response={response} />);
  });

  expect(container.innerHTML).toBe('');

  await act(() => {
    resolveOuterClientComponentChunk();
  });

  await act(() => {
    resolveInnerClientComponentChunk();
  });

  expect(container.innerHTML).toBe('{}');
});

But it's basically the same scenario as the test should resolve deduped objects that are themselves blocked, which was added in #29823, and this PR also fixed the bug.

[dai-shi]

So, is it an already fixed bug? I wonder if -rc.1 will be released.