[React 19] Cannot assign to readonly property about react

[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.

[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?

[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.

from react.

[eps1lon]

Fixed in #29823.

The current plan is to release rc.1 after #29898 is resolve

[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]

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)

from react.

[dai-shi]

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