code-farmer-i / vue-markdown-editor

A markdown editor built on Vue
https://code-farmer-i.github.io/vue-markdown-editor/
MIT License
1.1k stars 109 forks source link

this.$slots.default is not a function #236

Open gustawdaniel opened 1 year ago

gustawdaniel commented 1 year ago

I have error

this.$slots.default is not a function
render@webpack-internal:///../../node_modules/@kangc/v-md-editor/lib/base-editor.js:5034:20
compatRender@webpack-internal:///../../node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:4896:21
renderComponentRoot@webpack-internal:///../../node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:2839:16
componentUpdateFn@webpack-internal:///../../node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:8833:46
run@webpack-internal:///../../node_modules/@vue/compat/dist/vue.runtime.esm-bundler.js:587:19

I am using vue3 and this lib in latest version.

Screenshot from 2023-06-06 00-22-46

I added console log on:

this.$slots.default 

and there is array instead of function

image

This context can be helpful: I am using webpack5 with vue3 and see a lot of

(deprecation COMPILER_NATIVE_TEMPLATE) <template> with no special directives will render as a native template element instead of its inner content in Vue 3
gustawdaniel commented 1 year ago

Next in the same component I had errors:

_this.$el

and

optionsOrInstall.install is not a function

In Vue 2, the $slots.default property was a function that returned the default slot content. However, in Vue 3, the structure of slots has changed, and $slots.default is now an array rather than a function.

In Vue 2, slots were accessed using the $slots object, and you could access the default slot content using $slots.default(). This allowed you to treat the default slot as a function and render its content wherever needed.

gustawdaniel commented 1 year ago

In my case fixes was

this.$slots.default(0) => this.$slots.default[0]

and

  } else if(optionsOrInstall && typeof optionsOrInstall === 'object' && 'install' in optionsOrInstall && typeof optionsOrInstall.install === 'function') {

instead of

else {

before

    optionsOrInstall.install(base_editor, opt);
code-farmer-i commented 1 year ago

vue3 version: @kangc/v-md-editor@next

gustawdaniel commented 1 year ago

@code-farmer-i I am using 2.3.15, please accept and release new version. This not break backward compatibility and fixing this problem.

https://github.com/code-farmer-i/vue-markdown-editor/pull/238/files