initialVNode is null

[kwatman]

Im trying to use prosemirror adapter in vue. im using this code from the vue documentation to create a editor with a paragraph. The only thing i changed in my code is that i added code for the state and schema. When i run the code i always get this error:

TypeError: initialVNode is null
    componentUpdateFn runtime-core.esm-bundler.js:5158
    run reactivity.esm-bundler.js:181
    update runtime-core.esm-bundler.js:5270
    setupRenderEffect runtime-core.esm-bundler.js:5280
    mountComponent runtime-core.esm-bundler.js:5048
    processComponent runtime-core.esm-bundler.js:5002
    patch runtime-core.esm-bundler.js:4471
    componentUpdateFn runtime-core.esm-bundler.js:5146
    run reactivity.esm-bundler.js:181
    update runtime-core.esm-bundler.js:5270
    setupRenderEffect runtime-core.esm-bundler.js:5280
    mountComponent runtime-core.esm-bundler.js:5048
    processComponent runtime-core.esm-bundler.js:5002
    patch runtime-core.esm-bundler.js:4471
    componentUpdateFn runtime-core.esm-bundler.js:5146
    run reactivity.esm-bundler.js:181
    update runtime-core.esm-bundler.js:5270
    setupRenderEffect runtime-core.esm-bundler.js:5280
    mountComponent runtime-core.esm-bundler.js:5048
    processComponent runtime-core.esm-bundler.js:5002
    patch runtime-core.esm-bundler.js:4471
    componentUpdateFn runtime-core.esm-bundler.js:5146
    run reactivity.esm-bundler.js:181
    update runtime-core.esm-bundler.js:5270
    setupRenderEffect runtime-core.esm-bundler.js:5280
    mountComponent runtime-core.esm-bundler.js:5048
    processComponent runtime-core.esm-bundler.js:5002
    patch runtime-core.esm-bundler.js:4471
    componentUpdateFn runtime-core.esm-bundler.js:5146
    run reactivity.esm-bundler.js:181
    update runtime-core.esm-bundler.js:5270
    setupRenderEffect runtime-core.esm-bundler.js:5280
    mountComponent runtime-core.esm-bundler.js:5048
    processComponent runtime-core.esm-bundler.js:5002
    patch runtime-core.esm-bundler.js:4471
    render2 runtime-core.esm-bundler.js:5796
    mount runtime-core.esm-bundler.js:3063
    mount runtime-dom.esm-bundler.js:1527
    renderToCanvas chunk-ERN3BQXJ.mjs:5
    renderToCanvas runtime.js:8247
    mount chunk-ERN3BQXJ.mjs:5
    mount runtime.js:8260
    runPhase runtime.js:8185
    mount runtime.js:8259
    render runtime.js:8285
    renderToElement runtime.js:8207
    renderSelection runtime.js:9097
    selectSpecifiedStory runtime.js:8976
    initializeWithStoryIndex runtime.js:8950
    initializeWithProjectAnnotations runtime.js:8433
    initialize runtime.js:8406
    gi runtime.js:8934
    ts runtime.js:9365
    <anonymous> vite-app.js:22

This is my code:

BlockEditorProvider.vue

<script setup lang="ts">
import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
import BlockEditor from '@/Components/BlockEditor.vue'
</script>


<template>
  <ProsemirrorAdapterProvider>
    <BlockEditor/>
  </ProsemirrorAdapterProvider>
</template>

BlockEditor.vue

<script setup lang="ts">
import type { VNodeRef } from 'vue'
import { useNodeViewFactory } from '@prosemirror-adapter/vue'
import Paragraph from './Blocks/Paragraph.vue'

import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view';
import { Schema } from 'prosemirror-model'

const nodeViewFactory = useNodeViewFactory()

const schema = new Schema({
    nodes: {
        doc: {
            content: "block+"
        },
        paragraph: {
            group: "block",
        },
        text: {
            group: "inline"
        }
    },
    marks: {}
})

let state = EditorState.create({
    schema: schema,
})


const editorRef: VNodeRef = (element) => {
  const el = element as HTMLElement

  if (!el || el.firstChild)
    return

  const editorView = new EditorView(el, {
    state: state,
    nodeViews: {
      paragraph: nodeViewFactory({
        component: Paragraph,
        as: 'div',  // Ensure this matches the expected tag of the component
        contentAs: 'p',  // Ensure this matches the expected tag in the Paragraph component
      }),
    }
  })
}

</script>

<template>
    <div :ref="editorRef" class="editor" />
</template>

Paragraph.vue

<script setup lang="ts">
import { useNodeViewContext } from '@prosemirror-adapter/vue'

const { contentRef, selected } = useNodeViewContext()
</script>

<template>
  <div :ref="contentRef" role="presentation"  />
</template>

<style scoped>
.selected {
    outline: blue solid 1px;
}
</style>

What am i doing wrong here ?