TypeError: Cannot read properties of undefined (reading 'model')

[ThomasLaigneauDecathlon]

Hi,

When I update my project node version to Node 16, my Ckeditor is not working anymore. It's displaying good but any modification won't be taken.

I see this error in my chrome console :

It seems to be related with the vue component and this.$_instance seems to be undefined.

Any idea ?

[O-Hooman]

it also happens to me, try vue@3.2.30 if you using Vue 3

[ThomasLaigneauDecathlon]

I'm using Vue 3.2.31.

Should I downgrade to 3.2.30 ?

[O-Hooman]

@ThomasLaigneauDecathlon yea

[ThomasLaigneauDecathlon]

Still the same error after downgrade

[O-Hooman]

@ThomasLaigneauDecathlon idk if this will help but try to delete the node_modules & package-lock and npm i vue@3.2.30 && npm install

[shoaibsharif]

Thank @O-Hooman , downgrading to 3.2.30 is working. But is that vue issue?

[retosteffen]

same problem for me when going from vue 3.2.30 to 3.2.31

[zcmk123]

same problem here wat happen?

[FilipTokarski]

Hi, thanks for the report. I can confirm I get this error also on node 14.15.4 and Vue 3.0.0. The editor however seems to be working fine.

Error message:

TypeError: Cannot read properties of undefined (reading 'model')
    at Proxy.$_setUpEditorEvents (ckeditor.js?3730:5:1)
    at eval (ckeditor.js?3730:5:1)

[ychongsaytc]

Refer to Vue 3 (source code):
https://github.com/vuejs/core/blob/v3.2.31/packages/runtime-core/src/componentPublicInstance.ts#L412`

Attempting to mutate public property "xxx". Properties starting with $ are reserved and readonly.

So, why do the CKEditor maintainers use “$“ as property prefix? It's obviously unnecessary.

Source code: https://github.com/ckeditor/ckeditor5-vue/blob/v2.0.1/src/ckeditor.js#L52

[Varkoff]

I encountered the same error. Downgrading to vue@3.2.30 solved it for me. Thanks guys !

[psmyrek]

Thank you for the hints. It looks like this bug is caused by the changes between 3.2.30 and 3.2.31 in Vue and maybe it will be fixed in the next version of Vue, according to the comment: vuejs/core#5492 (comment).

However, this issue can be fixed also in the CKEditor5 Vue component by using the markRaw() method to explicitly tell Vue to never convert the editor instance to a proxy.

[pomek]

A new version of the Vue integration is released. 👉 https://github.com/ckeditor/ckeditor5-vue/releases/tag/v3.0.0