Vite Vue3 this.onPaneAdd is not a function

[Blaine]

This is how I am using it.

<template>
	<splitpane>
		<pane> 1 </pane>
		<pane> 2 </pane>
	</splitpane>
</template>
<script>

import { ref, defineComponent } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
export default defineComponent({
 ...
  components: {
    Splitpanes,
    Pane
  },
  ...
})
</scirpt>

I get a few warnings,

1. Failed to resolve component: splitpane
2. Injection not found, for requestUpdate, onPaneAdd, onPaneRemove and onPaneClick (twice)
3. Unhandled error during execution of mounted hook.
   And a final error for,
   this.onPaneAdd() is not a function

I am using the vite vue-ts template, and my dependencies look like this.

  "dependencies": {
    "splitpanes": "^3.0.6",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@types/node": "^16.4.10",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.4.4",
    "vue-tsc": "^0.2.2"
  }

[clayscode]

Also running into this same issue. This library looked promising but not entirely sure if it's maintained anymore

[Antoni]

Hi @Blakeinstein, it looks like you have a typo in the component name splitpane should be spelled splitpanes, hence the first error. there's also a typo closing the script tag.

Please reopen with a reproduction link if not solved.