Error when using in vue3 project with vue-router

[TheStachelfisch]

I'm currently trying to use this for a project with vue, more specifically version 3.2.13 and vue-router 4.0.3. The typewriter-vue version is 0.5.19. The currently latest version from npm. The vue project was setup with the vue cli tool.

I tried using the typewriter component like described in the Install & basic usage section. After doing that the following error is thrown

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.__vue_render__ (typewriter.esm.js?6422:446:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5575:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5703:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5485:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5229:1)

Three different warnings are also printed to the console.

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
  at <Typewriter replace= Array(2) type-interval=100 replace-interval=1000 > 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
[Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
  at <Typewriter replace= Array(2) type-interval=100 replace-interval=1000 > 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
[Vue warn]: Unhandled error during execution of render function 
  at <Typewriter replace= Array(2) type-interval=100 replace-interval=1000 > 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Typewriter replace= Array(2)0: {from: 'Vue', to: 'React?'}1: {from: 'Typewriter React?', to: 'Joking, it`s Vue!'}from: "Typewriter React?"to: "Joking, it`s Vue!"[[Prototype]]: Objectlength: 2[[Prototype]]: Array(0)at: ƒ at()concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()findLast: ƒ findLast()findLastIndex: ƒ findLastIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}[[Prototype]]: Object type-interval=100 replace-interval=1000 > 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

---

When switching between routes a different error is thrown

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js?2725:35:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5657:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at flushJobs (runtime-core.esm-bundler.js?d2dd:396:1)

[p4trykJ]

@TheStachelfisch I am so sorry, but typewriter-vue is not compatible with Vue 3. Adding Vue 3 support is currently not planned.

[dzcpy]

Any updates? Is there any package that supports vue 3?

[p4trykJ]

@dzcpy typewriter-vue does not support Vue 3 (and will not), but you can check https://www.npmjs.com/package/vue-writer.