tip tap does not render

What happens? I have the most basic of markup to render tip tap but I get a three warnings and the component refuses to render.

How can others reproduce the issue? Steps to reproduce the behavior:

1. Create a new Quasar v2.0.0-beta.9 project using defaults
2. Install TipTap Next
3. Use the composition API example mentioned here https://next.tiptap.dev/installation/vue3 to create a demo app.
4. Start Quasar dev
5. You will see a blank main page. But if you look in the developer console you will see the following warnings: [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. warn @ webpack-internal:///./node_modules/@tiptap/vue-3/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:160 2webpack-internal:///./node_modules/@tiptap/vue-3/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:160 [Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. warn @ webpack-internal:///./node_modules/@tiptap/vue-3/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:160 webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at <EditorContent editor=undefined > at <Tiptap> at <App onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <QPageContainer> at <QLayout view="lHh Lpr lFf" > at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

What behavior did you expect? I expect to see a simple TipTap editor displayed in the main content area

What’s your environment?

• Windows 10
• Chrome
• Desktop

[philippkuehn]

Ok, I now know the cause of the problem!

@tiptap/vue-3 uses vue@^3.0.0 as a dependency. quasar uses a fixed version vue@3.0.6.

If you do a yarn install in your quasar project your node_modules folder looks like that:

node_modules
  vue (3.0.6)
  @tiptap
    vue-3
      node_modules
        vue (3.0.7)

So @tiptap/vue-3 uses a different version of vue (maybe this shouldn’t be a problem in production).

And vue 3 doesn’t like that. Because of this useEditor uses a different instance?! of vue and doesn’t work anymore. So if I’m calling getCurrentInstance() inside of useEditor it returns null. Which is bad.

How to solve the issue

1. solution: I should add vue as a peerDependency in @tiptap/vue-3

I think this would be best but I can’t get this to work because of our mono repo structure. I have to install vue 3 in our root (workspace) but there is already vue 2 installed. I have to find a way to use vue 2 and vue 3 at the same time as a peerDependency. 🤷‍♂️

2. temporary solution: resolutions

you can add this to your package.json of your quasar project and everything should work fine:

{
  // ...
  "resolutions": {
    "vue": "^3.0.0"
  }
}

[datduyng]

In my case, I had document properties in StarterKit extension as false but didn’t append my custom Document component in my Editor extensions object which caused the issue. Removing document: false, or adding the Document extension works for me

StarterKit
  .configure({
    document: false,
  })