Trying to incorporate the vue-tabulator Vue component from https://github.com/angeliski/vue-tabulator into a basic Vue application written in TypeScript.
main.ts:
import Vue from 'vue'
import VueTabulator from 'vue-tabulator'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(VueTabulator)
new Vue({
render: h => h(App)
}).$mount('#app')
App.ts:
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class App extends Vue {}
App.vue:
<template>
<div id="app">
<h1>Kewl</h1>
</div>
</template>
<style scoped>
</style>
<script lang="ts" src="./App.ts">
</script>
Encountered an error while running the application using npm run serve:
ERROR Failed to compile with 1 errors 2:23:19 PM
This dependency was not found:
* tabulator-tables in ./node_modules/vue-tabulator/dist/vue-tabulator.common.js
To install it, you can run: npm install --save tabulator-tables
Type checking in progress...
ERROR in C:/Users/eperret/Desktop/tabulator-tests/src/main.ts(2,26):
2:26 Could not find a declaration file for module 'vue-tabulator'. 'C:/Users/eperret/Desktop/tabulator-tests/node_modules/vue-tabulator/dist/vue-tabulator.umd.js' implicitly has an 'any' type.
Try `npm install @types/vue-tabulator` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-tabulator';`
1 | import Vue from 'vue'
> 2 | import VueTabulator from 'vue-tabulator'
| ^
3 | import App from './App.vue'
4 |
5 | Vue.config.productionTip = false
Version: typescript 3.5.3
Time: 3055ms
Lastly, here's the content of packages.json:
{
"name": "tabulator-tests",
"version": "0.1.0",
"private": true,
...
}
The solution provided in this thread didn't seem to resolve the issue faced.
Any suggestions on how to proceed?
[EDIT 1]
Attempted to install TypeScript types for vue-tabulator, but no such package seems to be available:
npm install @types/vue-tabulator
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-tabulator - Not found
...[EDIT 2]
Regarding shims, there are two related files in the src folder:
shims-tsx.d.ts:
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
shims-vue.d.ts:
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}