"Cannot set parent: node already has a parent"

[nvie]

I created this ticket as a reference for anyone running into the following error:

Uncaught Error: Cannot set parent: node already has a parent

The issue

You can run into this runtime error when using @liveblocks/client or @liveblocks/react. This error is an internal integrity check that should never be surfaced to Liveblocks users, yet some people have seen it. It typically happens when you pass initialStorage like so:

const initialStorage = {
  animals: new LiveList(["🦊", "🐍", "🐻‍❄️"])
}

// If you use @liveblocks/client
client.enter(..., {
  initialStorage,
});

// If you use @liveblocks/react
<RoomProvider id="..." initialStorage={initialStorage}>...</RoomProvider>

The cause of the problem is that, on line 1, initialStorage is a global instance that instantiates the new LiveList (or LiveObject, or LiveMap) only once, and keeps a reference to the same instance, which gets reused between rooms when you leave/re-enter the room. This is problematic, because every Live data structure can only be bound to a room once, after that it "belongs" to that room instance. An attempt to reuse it in a different room later will fail — hence the "already has a parent" error message.

The fix

If you run into this issue, the fix is to pass a function as the initialStorage value, so new/unbound instances are created every time:

// ✅ Turn this into a factory!
const initialStorageFn = () => ({
  animals: new LiveList(["🦊", "🐍", "🐻‍❄️"])
});

// If you use @liveblocks/client
client.enter(..., {
  initialStorage: initialStorageFn,
});

// If you use @liveblocks/react
<RoomProvider id="..." initialStorage={initialStorageFn}>...</RoomProvider>

The real fixes

• We should make the error message clearer and less obtuse
• We should recommend the factory pattern in our documentation and examples by default
• Maybe even deprecate passing a value directly, and always requiring a function?