Error spam "$attrs is readonly" and "$listeners is readonly" with NcButton
Closed this issue · 6 comments
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.
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.
*Checking some guesses
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.
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
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