Tiptap: BulletList and OrderedList Extensions throwing Console Error

Created on 13 Nov 2020 · 7Comments · Source: ueberdosis/tiptap

Describe the bug
When adding the following Extensions to an TipTap Editor Instance, the complete Menubar is broken (not displayed)

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behavior:

Import BulletList and/or OrderedList Extension
Implement them like in examples
Reload the Component containing the Editor

JS Code:

`import {Editor, EditorContent, EditorMenuBar} from 'tiptap'
import {
Bold,
Heading,
Italic,
Underline,
Strike,
Code,
BulletList,
} from 'tiptap-extensions'

export default {
name: "Description",
components: {
EditorMenuBar,
EditorContent
},
data() {
return {
editor: null,
content: ''
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Bold(),
new Italic(),
new Underline(),
new Strike(),
new Code(),
new BulletList(),
new Heading({
levels: [1, 2, 3, 4, 5, 6]
})
],
content: "",
onUpdate: ({state, getHTML, getJSON, transaction}) => {
this.$emit('set-content', getHTML())
}
})
},
beforeDestroy() {
this.editor.destroy()
}
}`

Template:

<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div> <button type="button" :class="{ 'is-active' : isActive.bold() }" v-on:click="commands.bold"> Bold </button> <button type="button" :class="{ 'is-active' : isActive.italic() }" v-on:click="commands.italic"> Italic </button> <button type="button" :class="{ 'is-active' : isActive.underline() }" v-on:click="commands.underline"> Underline </button> <button type="button" :class="{ 'is-active' : isActive.strike() }" v-on:click="commands.strike"> Strike </button> <button type="button" :class="{ 'is-active' : isActive.code() }" v-on:click="commands.code"> Code </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 1}) }" v-on:click="commands.heading({level:1})"> H1 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 2}) }" v-on:click="commands.heading({level:2})"> H2 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 3}) }" v-on:click="commands.heading({level:3})"> H3 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 4}) }" v-on:click="commands.heading({level:4})"> H4 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 5}) }" v-on:click="commands.heading({level:5})"> H5 </button> <button type="button" :class="{ 'is-active' : isActive.heading({level: 6}) }" v-on:click="commands.heading({level:6})"> H6 </button> <button type="button" :class="{ 'is-active' : isActive.bullet_list() }" v-on:click="commands.bullet_list()"> Bullet List </button> </div> </editor-menu-bar> <editor-content class="form-control" :editor="editor"></editor-content>

Expected behavior
Bullet List and Ordered List should be usable in Editor

Environment