My VueJS view was originally written in JavaScript using the component "splitpanes" from npm package. The code was functioning well with the following structure:
<template>
<div>
<Splitpanes :dbl-click-splitter="false" :horizontal="horizontal">
<Pane id="pane-video" class="d-flex flex-column">
...
</Pane>
</Splitpanes>
</div>
</template>
<script>
import Vue from "vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default Vue.extend({
components: {
Splitpanes,
Pane
},
...
</script>
I decided to switch the code to TypeScript like so:
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import Splitpanes from "splitpanes";
import Pane from "splitpanes";
@Component({
components: { Splitpanes, Pane }
})
export default class VideoConf extends Vue {
Upon making this change, I encountered an error message in VS Code:
Could not find a declaration file for module 'splitpanes'. 'client-vue/node_modules/splitpanes/dist/splitpanes.common.js' implicitly has an 'any' type. Try
npm install @types/splitpanesif it exists or add a new declaration (.d.ts) file containingdeclare module 'splitpanes';Vetur(7016)
I attempted both solutions provided: npm install @types/splitpanes and creating a shims-splitpanes.d.ts file with "declare module 'splitpanes'". Although the syntax checking error disappeared in VS Code and I could run npm run serve, upon opening the page in the browser, I received:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (and the same error for Pane).
When hovering over the import statement for "splitpanes":
import Splitpanes from "splitpanes";
I noticed that it was pointing to the @types folder in node_modules:
module "/Users/lisandro/tmp/aws-chime/client-vue/node_modules/@types/splitpanes/index"
It seems I may be missing something crucial related to @types functionality in a TypeScript project. Any insights or suggestions would be greatly appreciated. Thank you!