Error spam "$attrs is readonly" and "$listeners is readonly" with NcButton

[max-nextcloud]

We have introduced a link popover recently in text. The component is loaded via a tiptap mechanism. It's triggering lot of errors in the console:

Removing NcButton from the component makes the errors go away. So I suspect it's due to the attrs magic that NcButton applies.

See also:

• issue in text
• previous issue here - we're already using the nextcloud webpack config fix.

[ShGKme]

So I suspect it's due to the attrs magic that NcButton applies.

It doesn't do anything specific, just passing attrs. There is no actual mutation of $attrs or $listeners in NcButton or other components.

This happens when parent component instance and child component instance are from different Vue when there are multiple Vue on the page. Vue fails to check that the instance is the parent.

[ShGKme]

*Checking some guesses

[ShGKme]

This happens when parent component instance and child component instance are from different Vue when there are multiple Vue on the page. Vue fails to check that the instance is the parent.

A bit more details. When a VNode with a component is rendered for the first time, component instance is created. During instance creation, $attrs and $readonly properties are defined on the instance:

https://github.com/vuejs/vue/blob/main/src/core/instance/render.ts#L51-L85

Here it checks isUpdatingChildComponent. This flag is a global module-scope flag:

https://github.com/vuejs/vue/blob/main/src/core/instance/lifecycle.ts#L25

isUpdatingChildComponent is true when during the rendering (patching) a component is updating a child components instance (its props etc.).

So, this error is shown when in a VDOM tree there are VNodes created by different Vue copies on the page and parent from one Vue updates child from another Vue.

[ShGKme]

[ShGKme]

So...

There is nothing we can do on the @nextcloud/vue side. When (absolutely any) component is rendered first in a tiptap plugin it is assigned to Text's Vue which makes this component "unusable" in Viewer (via Text's viewer component).

Because Viewer's components are used directly as a component in Viewer's rendering, Vue should be externalized from any Viewer's component, including Editor and tiptap plugins.

Something like https://github.com/ueberdosis/tiptap/blob/main/packages/vue-2/src/VueNodeViewRenderer.ts#L67

The only problem — to get Vue from Viewer in LinkBubblePluginView

[ShGKme]

Closing, because there is no issue on @nextcloud/vue side. NcButton is only broken because it is the only component used in both editor and plugins in Text.

Fix: nextcloud/text#5402