Can't dynamically add layers to the stage

[codedealer]

When trying to add a layer to the stage in vue-konva Vue crashes:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VLayer key=2 >

Following by

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

While the error supplies that it's an internal Vue bug I suspect it is still related to how Konva treats layers during the runtime.

Environment:

• vue 3.2.40
• vue-konva 3.0.1

Demo to reproduce the error (click "Add layer"): https://codesandbox.io/s/vibrant-scooby-u20x98

[lavrton]

That is the bug in version 3. I wasn't able to find the solution yet. For now, just no use v-for on layers.

It is not recommended to use too many layers any way.

[ryo7000]

Using v-if on the Layer can cause similar problems. Please see the demo below.

Demo to reproduce the error (click "Add layer"): https://codesandbox.io/s/dreamy-allen-90xxxu

After investigating the cause of the problem, I found that removing container.value.innerHTML = ''; from this line eliminates the error.

According to the Vue3 docs, the key is now automatically generated, so removing the DOM would cause problems, right?

[Avarow]

Any update or workaround on this issue?

[geoffgscott]

@Avarow This has been a longstanding issue with Vue3 and Konva. I don't think there is any solution other than putting your conditionals inside the v-layer