ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.49k stars 2.28k forks source link

After initializing app throw error #2958

Closed Dev1lDragon closed 2 years ago

Dev1lDragon commented 2 years ago

What’s the bug you are facing?

After initializing componet i receive:

[Vue warn]: Error in nextTick: "InvalidCharacterError: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('[object HTMLDivElement]') contains the invalid name-start character '['."

after element.append(...editor.options.element.childNodes);

Which browser was this experienced in? Are any special extensions installed?

"dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/list": "^5.11.0",
    "@fullcalendar/moment": "^5.11.0",
    "@fullcalendar/moment-timezone": "^5.11.0",
    "@fullcalendar/resource-daygrid": "^5.11.0",
    "@fullcalendar/resource-timegrid": "^5.11.0",
    "@fullcalendar/resource-timeline": "^5.11.0",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/timeline": "^5.11.0",
    "@fullcalendar/vue": "^5.11.0",
    "@loadingio/loading-bar": "^0.1.1",
    "@tiptap/starter-kit": "^2.0.0-beta.190",
    "@tiptap/vue-2": "^2.0.0-beta.84",
    "apexcharts": "^3.35.2",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "color-parse": "^1.4.2",
    "cookie": "^0.5.0",
    "copy-webpack-plugin": "^11.0.0",
    "countries-and-timezones": "^3.3.0",
    "croppie": "^2.6.5",
    "currency.js": "^2.0.4",
    "dotenv": "^16.0.1",
    "es6-object-assign": "^1.1.0",
    "favico.js": "^0.3.10",
    "file-saver": "^2.0.5",
    "firebase": "^9.8.1",
    "flag-icon-css": "^4.1.0",
    "ga-gtag": "^1.1.1",
    "generate-file-webpack-plugin": "^1.0.1",
    "get-canvas-context": "^1.0.2",
    "jquery": "^3.6.0",
    "js-money": "^0.6.3",
    "libphonenumber-js": "^1.10.4",
    "lodash": "^4.17.21",
    "mobile-detect": "^1.4.5",
    "moment": "^2.29.3",
    "moment-timezone": "^0.5.34",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
    "path-parse": "^1.0.7",
    "perfect-scrollbar": "^1.5.5",
    "postcss": "^8.4.14",
    "postcss-preset-env": "^7.6.0",
    "postcss-sass": "^0.5.0",
    "postcss-scss": "^4.0.4",
    "print-html-element": "^0.5.1",
    "process": "^0.11.10",
    "read-excel-file": "^5.3.2",
    "resize-observer-polyfill": "^1.5.1",
    "stream": "0.0.2",
    "string-mask": "^0.3.0",
    "string-replace-loader": "^3.1.0",
    "svg-to-image": "^1.1.3",
    "text-mask-core": "^5.1.2",
    "v-mask": "^2.3.0",
    "validator": "^13.7.0",
    "vue-advanced-cropper": "^1.10.1",
    "vue-analytics": "^5.22.1",
    "vue-apexcharts": "^1.6.2",
    "vue-chartist": "^2.3.1",
    "vue-chat-scroll": "^1.4.0",
    "vue-i18n": "^8.27.0",
    "vue-meta": "2.4.0",
    "vue-observe-visibility": "^1.0.0",
    "vue-progressbar": "^0.7.5",
    "vue-recaptcha": "^1.3.0",
    "vue-router": "^3.5.3",
    "vue-youtube": "^1.4.0",
    "vuebar": "0.0.20",
    "vuejs-logger": "^1.10.2",
    "vuetify": "^2.6.6",
    "vuetify-credit-card": "^1.0.1",
    "vuetify-loader": "^1.7.3",
    "vuex": "^3.6.2",
    "vuex-i18n": "^1.13.1",
    "vuex-router-sync": "^5.0.0",
    "worker-loader": "^3.0.8",
    "xlsx": "^0.17.4"
},
"devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
    "@babel/plugin-transform-spread": "^7.17.12",
    "@babel/preset-env": "^7.18.0",
    "@babel/register": "^7.17.7",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "deepmerge": "^4.2.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.6.0",
    "node-sass": "^7.0.1",
    "postcss-loader": "^6.2.1",
    "prettier": "^2.6.2",
    "sass": "~1.32.6",
    "sass-loader": "^12.6.0",
    "terser-webpack-plugin": "^5.3.1",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-livereload-plugin": "^3.0.2",
    "webpack-notifier": "^1.15.0"
}

How can we reproduce the bug on our side?

npm install @tiptap/vue-2 @tiptap/starter-kit

paste your example in vue component and execute

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Render tiptap

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

bdbch commented 2 years ago

@Dev1lDragon could you please provide a CodeSandbox with your issue and reopen this issue when you can provide one? Thank you a lot.