[BUG] Cannot set parent: node already has a parent

Describe the bug

We use Liveblocks on a react app with live text input updates. The initial contents of this text input are fetched from a param value in the URL. Eg. /play/<text-input-id>

This text-input-id is then used to retrieve associated data from the database. There is also a dropdown input that lets you select valid text-input-id on selecting, we update the route history as well /play/<new-text-input-id>

Everything works as expected, however, there is a strange edge case where Liveblock fails with the following error:

index.js:194 Uncaught Error: Cannot set parent: node already has a parent
    at LiveObject._setParentLink (index.js:194:1)
    at LiveObject.update (index.js:1953:1)
    at LiveObject.set (index.js:1849:1)
    at createOrUpdateRootFromMessage (index.js:2747:1)
    at index.js:3247:1
    at doNotBatchUpdates (index.js:2637:1)
    at WebSocket.onMessage (index.js:3205:1)

To Reproduce

Steps to reproduce the behavior:

1. Got to /play/<text-input-id>
2. Inspect that the initial data is loaded correctly.
3. Change the ID from the dropdown to a new ID. The route is now updated to /play/<new-text-input-id>
4. Inspect that the initial data is loaded correctly.
5. Switch back to the old ID. The route is now updated to /play/<text-input-id>
6. Check the console for the above error.

Expected behavior

The input value should be updated to the old value fetched from the database.

Environment (please complete the following information):

• react - v18.2.0
• @liveblocks/client - ^0.18.5",
• @liveblocks/react - ^0.18.5",

Happy to provide any additional context to help understand the root cause here.

[nvie]

Probably a dumb question, but that should not break things, right? Providing a new room id should switch to a new room?

Not dumb at all! Actually, a good find. This may be something we need to fix indeed. Thanks for bringing it to our attention.

If that theory is correct, you should be able to work around it for now by also passing the roomId to a key prop to the RoomProvider, like so:

<RoomProvider
  key={editorId}  // 👈
  id={editorId}
  ...
>
  ...
</RoomProvider>

Doing so will cause React to unmount-then-remount the new room instead of letting the RoomProvider do the switching.

[chaitanyya]

Thanks for the update; I’ll prepare a minimal example based on our implementation and share it asap.