I am trying to use the vue-tabulator Vue component: https://github.com/angeliski/vue-tabulator in a simple Vue application which happens to be coded 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>
When running my application with npm run serve I have the following:
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
and last but not least, packages.json:
{
"name": "tabulator-tests",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.3.2",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.3.0",
"vue-tabulator": "^1.2.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-plugin-typescript": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/eslint-config-typescript": "^4.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard",
"@vue/typescript"
],
"rules": {},
"parserOptions": {
"parser": "@typescript-eslint/parser"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
I check the answer given here: Could not find a declaration file for module
But I don't see how the solution given in that thread can actually help me.
How can I do?
[EDIT 1]
I tried to install the TypeScript types for vue-tabulator but it seems there isn't such a package:
npm install @types/vue-tabulator
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-tabulator - Not found
npm ERR! 404
npm ERR! 404 '@types/vue-tabulator@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
[EDIT 2]
About the shims I have two related files in my 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
}
