Can't find module "vue-good-table" Typescript

[AhmedElbatt]

I am newbie to either typescript and Vue.js ; and I am experiencing an issue that related with using the Vue-good-table componant inside a typescript file like this;

import VueGoodTable from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css'

TS compiler throws a compile error (Can't find module "vue-good-table").Can anyone help me please ?

[egoist]

You can add a custom type definition for vue-good-table or wait for someone to contribute one 😅

[Dried09]

Problem is actual. I tried to add this:
shims.d.ts

declare module 'vue-good-table' {
  import VueGoodTable from 'vue-good-table';
}

my-component.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import VueGoodTable from 'vue-good-table';

@Component({
  components: {
    VueGoodTable
  }
})
export default class MyComponent extends Vue {
  //my code
}

Compiler has no errors, but runtime has error:

[Vue warn]: Failed to mount component: template or render function not defined.

Can someone give more specific advice with short example, how to import vue-good-table component correctly using typescript?

[xaksis]

@Dried09 @AhmedElbatt component export should now be fixed with v2.8.1

Install instruction for your ref:
https://xaksis.github.io/vue-good-table/guide/#installation

[rafaelgov95]

@xaksis Do you have a solution?

[xaksis]

@rafaelgov95 umm... yeah... v2.8.1 should have a fix to the problem stated here...

[rafaelgov95]

@xaksis follows what @Dried09 said but does not work.

shims-vue.d.ts

declare module 'vue-good-table'{
  import VueGoodTable from 'vue-good-table';

}

[Dried09]

I figured out this problem, but... it's actually not a good solution
add vue-good-table.d.ts file anywhere in project, for example, and add into it:

declare module 'vue-good-table' {
    export = VueGoodTable;
}
declare const VueGoodTable: any;

Then in some component add import:
import * as VueGoodTable from 'vue-good-table';
And finally in this component add global import:
Vue.use(VueGoodTable.default);

After that table component should work.
P.S. To my mind - it's not a solution, just ugly crutch, but it works at least for now
Hope on typescript support improvements in future.

[xaksis]

@Dried09 with 2.8.1 you should be able to do what you were doing before:

shims.d.ts

declare module 'vue-good-table' {
  import { VueGoodTable } from 'vue-good-table'; // notice the syntax change
}

my-component.ts

import Vue from 'vue';
import Component from 'vue-class-component';
import VueGoodTable from 'vue-good-table';

@Component({
  components: {
    VueGoodTable
  }
})
export default class MyComponent extends Vue {
  //my code
}

can you confirm that this doesn't work for you?

[Dried09]

Nope, still not :(
shims.d.ts src Module ''vue-good-table'' has no exported member 'VueGoodTable'.

[xaksis]

I don't use typescript so someone else can help you better here but it seems like you need to export it from your shim too like:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

so following that logic, your shim might need to be:

declare module 'vue-good-table' {
  import { VueGoodTable } from 'vue-good-table';
  export default VueGoodTable;
}

make sure you're on 2.8.1 because 2.8.1 exports VueGoodTable versions before don't.
https://github.com/xaksis/vue-good-table/blob/master/src/index.js#L15

[commonpike]

Without claiming to understand much of all this, I did get it working by

creating a folder src/types/vue-good-table
creating a file src/types/vue-good-table/index.d.ts
containing

declare module 'vue-good-table';

Make sure typescript is set to include that file. My tsconfig.json says

"include": [
    "src/**/*.ts",
    ....

Now, in my view component, I can write

<script lang="ts">
    ....

    import 'vue-good-table/dist/vue-good-table.css';
    import { VueGoodTable } from 'vue-good-table';
    ....
    export default {
        ....
        components : {
            VueGoodTable
        },
        ....
        data() {
            return {
                columns :...
                rows: ....

and

<template>
    <vue-good-table
         :columns="columns"
          :rows="rows"/>

and compilling it doesn't complain and works.