vue.global.js:1855 Uncaught TypeError: t.component is not a function (Vue3, via unpkg.com)

[doconnor-clintel]

For some reason, on rendering, VueSignaturePad is expecting to be passed an instance of the app (which defines app.component), but instead receives the div element being mounted.

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/signature_pad.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-signature-pad.min.js"></script>


<div id="signature" style="width:500px; height: 500px"></div>
<template id="signature-component">
  <div id="app">
    <div class="container">
      <div class="container">
        <vue-signature-pad
          id="signature"
          width="100%"
          height="500px"
          ref="signaturePad"
        />
      </div>
      <div class="buttons">
        <button @click="undo">Undo</button>
        <button @click="save">Save</button>
      </div>
    </div>
  </div>
</template>
<script>

const signatureApp = Vue.createApp({
  name: 'MySignaturePad',
  template: "#signature-component",
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log(isEmpty);
      console.log(data);
    }
  }
});
signatureApp.component("vue-signature-pad", VueSignaturePad);
signatureApp.mount("#signature");

</script>

Results in

Navigated to file:///home/doconnor/vue.html

vue.global.js:11083 You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

vue.global.js:1661 [Vue warn]: Unhandled error during execution of render function 
  at <A id="signature" width="100%" height="500px"  ... > 
  at <MySignaturePad>
warn @ vue.global.js:1661
logError @ vue.global.js:1849
handleError @ vue.global.js:1841
renderComponentRoot @ vue.global.js:2556
componentUpdateFn @ vue.global.js:7174
run @ vue.global.js:635
instance.update @ vue.global.js:7288
setupRenderEffect @ vue.global.js:7302
mountComponent @ vue.global.js:7084
processComponent @ vue.global.js:7042
patch @ vue.global.js:6646
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
componentUpdateFn @ vue.global.js:7181
run @ vue.global.js:635
instance.update @ vue.global.js:7288
setupRenderEffect @ vue.global.js:7302
mountComponent @ vue.global.js:7084
processComponent @ vue.global.js:7042
patch @ vue.global.js:6646
render @ vue.global.js:7802
mount @ vue.global.js:6036
app.mount @ vue.global.js:10995
(anonymous) @ vue.html:43


vue.global.js:1855 Uncaught TypeError: t.component is not a function
    at vue-signature-pad.min.js:1:5978
    at Array.forEach (<anonymous>)
    at A (vue-signature-pad.min.js:1:5928)
    at renderComponentRoot (vue.global.js:2548:21)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.global.js:7174:59)
    at ReactiveEffect.run (vue.global.js:635:27)
    at instance.update (vue.global.js:7288:58)
    at setupRenderEffect (vue.global.js:7302:11)
    at mountComponent (vue.global.js:7084:11)
    at processComponent (vue.global.js:7042:19)
(anonymous) @ vue-signature-pad.min.js:1
A @ vue-signature-pad.min.js:1
renderComponentRoot @ vue.global.js:2548
componentUpdateFn @ vue.global.js:7174
run @ vue.global.js:635
instance.update @ vue.global.js:7288
setupRenderEffect @ vue.global.js:7302
mountComponent @ vue.global.js:7084
processComponent @ vue.global.js:7042
patch @ vue.global.js:6646
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
mountChildren @ vue.global.js:6829
mountElement @ vue.global.js:6740
processElement @ vue.global.js:6723
patch @ vue.global.js:6643
componentUpdateFn @ vue.global.js:7181
run @ vue.global.js:635
instance.update @ vue.global.js:7288
setupRenderEffect @ vue.global.js:7302
mountComponent @ vue.global.js:7084
processComponent @ vue.global.js:7042
patch @ vue.global.js:6646
render @ vue.global.js:7802
mount @ vue.global.js:6036
app.mount @ vue.global.js:10995
(anonymous) @ vue.html:43