React 18 bug: Immutable.js List of components not working anymore

[Raigen]

Hello!
We have a lot of existing code with Immutable.js data, sometimes we map an Immutable.List for a list of components so we get a Immutable.List of components. This used to work pretty good, but after the update to react 18 it stopped working and the app crashes.

Reproduction

I forked the SSR sandbox from Upgrading to React 18 on the server: https://codesandbox.io/s/sad-brook-ytzfvs?file=/src/App.js:726-934

Here is also the code I used in our project:

const App = (
  <ul>
    {Immutable.fromJS([
      { name: 'a', value: 'a' },
      { name: 'b', value: 'b' },
    ]).map((item) => (
      <li key={item.get('value')}>{item.get('name')}</li>
    ))}
  </ul>
)
const stream = ReactDOMServer.renderToPipeableStream(App)

Error

TypeError: Cannot read property '__iterator' of undefined
    at values (/home/foellerich/Git/epages-ui/node_modules/immutable/dist/immutable.js:4446:19)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5862:32)
    at renderNode (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5966:12)
    at renderHostElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5390:3)
    at renderElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5699:5)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5832:11)
    at retryTask (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6204:5)
    at performWork (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6251:7)
    at Immediate._onImmediate (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6575:12)
    at processImmediate (internal/timers.js:464:21)
events.js:377
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property '__iterator' of undefined
    at values (/home/foellerich/Git/epages-ui/node_modules/immutable/dist/immutable.js:4446:19)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5862:32)
    at renderNode (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5966:12)
    at renderHostElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5390:3)
    at renderElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5699:5)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:5832:11)
    at retryTask (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6204:5)
    at performWork (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6251:7)
    at Immediate._onImmediate (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server.node.development.js:6575:12)
    at processImmediate (internal/timers.js:464:21)
Emitted 'error' event on Transform instance at:
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
    at runNextTicks (internal/process/task_queues.js:64:3)
    at processImmediate (internal/timers.js:437:9)
[nodemon] app crashed - waiting for file changes before starting...

With stream.renderToNodeStream(App) the app does not crash but still throws a very similar error. Seems like our stream.on('error', handler catches the error with renderToNodeStream but not with renderToPipeableStream.
This error originates from react-dom-server-legacy.node.development.js instead of react-dom-server.node.development.js, but most lines look almost the same except the line numbers.

TypeError: Cannot read property '__iterator' of undefined
    at values (/home/foellerich/Git/epages-ui/node_modules/immutable/dist/immutable.js:4446:19)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5918:32)
    at renderNode (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6022:12)
    at renderHostElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5446:3)
    at renderElement (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5755:5)
    at renderNodeDestructive (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5888:11)
    at retryTask (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6260:5)
    at performWork (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6307:7)
    at /home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6628:12
    at scheduleWork (/home/foellerich/Git/epages-ui/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:82:3)

[salazarm]

Thanks for the bug report. Fixed in #24166

[emadhajjar]

I am getting the same bug when using Immutable map.

it did work after adding .toList()

[gaearon]

If you have an issue please file a new issue. We don’t track reports in closed issues.