"TypeError: Cannot read property 'name' of undefined"

[faxinwang]

does someone encountered this problem,

 Error in mounted hook: "TypeError: Cannot read property 'name' of undefined"
found in
---> <E>
       <RtfEditor> at ...

TypeError: Cannot read property 'name' of undefined
    at VueComponent.e.generateExtensions (element-tiptap.esm.js?4ccc:20)

this RtfEditor.vue is:

<template>
    <el-tiptap 
        v-model="content"
        placeholder="note your knowledge"
        output="json"
        >

    </el-tiptap>
</template>

<script lang="ts">

import {Vue, Component} from 'vue-property-decorator'
import {ElementTiptap } from 'element-tiptap'
import 'element-tiptap/lib/index.css';
import {
    // necessary extensions
    Doc,
    Text,
    Paragraph,
    Heading,
    Bold,
    Underline,
    Italic,
    Strike,
    ListItem,
    BulletList,
    OrderedList,
} from 'element-tiptap';

@Component({
    name:"RtfEditor",
    components:{
        'el-tiptap':ElementTiptap,
    }
})
export default class RtfEditor extends Vue{

    data(){
        return{
            content:"",
            // editor extensions
            // they will be added to menubar and bubble menu by the order you declare.
            extensions: [
                new Doc(),
                new Text(),
                new Paragraph(),
                new Heading({ level: 5 }),
                new Bold({ bubble: true }), // render command-button in bubble menu.
                new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
                new Italic(),
                new Strike(),
                new ListItem(),
                new BulletList(),
                new OrderedList(),
            ],
        }
    }

}

</script>

<style lang="less" scoped>

</style>

I'm using:

"element-tiptap": "^1.22.0",
"element-ui": "^2.13.1",
"vue": "^2.6.11",

[Leecason]

Please reload the packages. If still not work, please leave a code sandbox.

[faxinwang]

I removed element-tiptap and yarn add element-tiptap again, the code remain the same, but this time I got :

mounted hook: "TypeError: Cannot read property 'options' of undefined"
found in
---> <O>
       <RtfEditor> at

I'm trying to read and run the source code, but got stucked by the installation of windows-build-tools. I'm still trying to install it.

[Leecason]

Could you please leave a code sandbox for this ?

[isv9]

You can try to remove node_modules, remove yarn.lock, and run yarn install. It helped me.

[faxinwang]

I tried @isv9 's suggestion but still got the same error:

TypeError: Cannot read property 'options' of undefined
    at VueComponent.o.getTitleExtension (element-tiptap.esm.js?4ccc:20)
    at VueComponent.o.initPlaceholderExtension (element-tiptap.esm.js?4ccc:20)
    at VueComponent.o.generateExtensions (element-tiptap.esm.js?4ccc:20)
    at VueComponent.o.mounted (element-tiptap.esm.js?4ccc:20)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)

@Leecason I'm sorry, but I don't know how to leave a sandbox.

[Leecason]

It seems that the Doc extension not found in this code, do you add new Doc() to the extensions ?

[faxinwang]

Yes, you can find it in the code above.

[Leecason]

Would you please run the following code to see the output in console:

const doc = new Doc();
console.log(doc.name);

[faxinwang]

the output is doc, is there any problem with Doc plugin?

[Leecason]

The output is right, I'm confused, too.😰

[faxinwang]

Would you please check your gmail. I have sent you a message and want to add you as my qq friend.

[shadrachtuck]

I'm having this issue as well.

[shadrachtuck]

Except when I enter that console input I get Doc is undefined

[shadrachtuck]

I instantiate Doc under extensions though...

[Leecason]

I instantiate Doc under extensions though...

Could you create a code sandbox for this problem?

[roberto910907]

Same issue here:

TypeError: Cannot read property 'options' of undefined
    at VueComponent.value (element-tiptap.esm.js:20)
    at VueComponent.value (element-tiptap.esm.js:20)
    at VueComponent.value (element-tiptap.esm.js:20)
    at VueComponent.value (element-tiptap.esm.js:20)
    at invokeWithErrorHandling (vue.esm.js:1863)
    at callHook (vue.esm.js:4228)
    at Object.insert (vue.esm.js:3148)
    at invokeInsertHook (vue.esm.js:6357)
    at Vue.patch [as __patch__] (vue.esm.js:6576)
    at Vue._update (vue.esm.js:3954)