Errors with TypeScript

[davellanedam]

Hello, I'm getting some error when trying to use the package with TypeScript, any ideas on how to solve it? Thanks!

Argument of type 'typeof import("/Users/xxxxxx/project_name/node_modules/vue-hotjar/dist/types/index")' is not assignable to parameter of type 'Plugin_2'. Property 'install' is missing in type 'typeof import("/Users/xxxxxx/project_name/node_modules/vue-hotjar/dist/types/index")' but required in type '{ install: PluginInstallFunction; }'.

    4 | export function loadHotjar(app: App) {
  > 5 |   app.use(Hotjar, {
      |           ^^^^^^
    6 |     id: process.env.VUE_APP_HOTJAR, // Hotjar Site ID
    7 |     isProduction: true
    8 |   });

[henk-badenhorst]

Hi, Looks like your type is not correct, it should be VueConstructor<Vue> and not App. Try the below example and let me know if it works for your use case.

import Hotjar from 'vue-hotjar'
import Vue, { VueConstructor } from "vue/types";

export function loadHotjar(app: VueConstructor<Vue>) {
  app.use(Hotjar, {
    id: process.env.VUE_APP_HOTJAR,
    isProduction: true
  });
}

[davellanedam]

Thank you for the quick response, I'm using Vue 3, 100% with TypeScript and composition API, this is my full example:

import { App } from 'vue';
import Hotjar from 'vue-hotjar';

export function loadHotjar(app: App) {
  app.use(Hotjar, {
    id: process.env.VUE_APP_HOTJAR, // Hotjar Site ID
    isProduction: true,
    snippetVersion: 6
  });
}

Changed to your suggestion and still doesn't work

[henk-badenhorst]

I will have to publish an update to fix this issue. Thanks for pointing it out. Could you try the following just to help me debug and confirms the issue: In the node_modules/vue-hotjar/dist/types/index.d.ts replace everything with the following code:

import { App } from 'vue'

declare type VueHotjarPlugin = (app: App, options: VueHotjarUseOptions) => any;

export interface VueHotjarUseOptions {
  /**
   * Your Hotjar Site ID is a required parameter. You can find this ID at [insights.hotjar.com](https://insights.hotjar.com) under tracking.
   */
  id: string;

  /**
   * If you would like to disable or enable tracking, pass in either `true` or `false`.
   * It is advised to bind your Node ENV variable.
   * This is an optional parameter and will default to true if not specified.
   *
   * @Default true
   */
  isProduction?: boolean;

  /**
   * This optional parameter does not need to be specified as it will default to the latest Hotjar Snippet version.
   *
   * Currently, it will default to `version 6`.
   *
   * @Default 6
   */
  snippetVersion?: number
}

declare const Hotjar: VueHotjarPlugin

export default Hotjar

If this works and solves your problem, I will have to make an update without breaking it for Vue 2 users.

[davellanedam]

Thanks for taking a look at this Henk, it works indeed, no complaint from TS.

[henk-badenhorst]

Great, I did a bit more digging and seeing more, breaking changes in Vue 3. It's a bit tricky to make it backward compatible but indeed this is something that needs to be fixed. I will update you once the changes are published.

[henk-badenhorst]

Hi @davellanedam apologies for the wait. I have recently made an update to the plugin to make this plugin compatible with Vue 3.x.x however it is partially compatible. After some digging, I was not able to changes the typings without breaking it for Vue 2.x.x TypeSecript users. So currently the plugin is only Partially compatible with Vue 3.x.x.

So here is the solution: I have started work on vue-hotjar-next I will have a working version soon. So let's keep this issue open until I have published a working version. I will keep you posted!

[henk-badenhorst]

@davellanedam Sorry for the wait. The new version is ready and should solve your Typescript typings issue. Vue-hotjar-next is built with TypeScript and much stricter typings than this version. It is also specifically made for Vue 3. Please let me know if you have any issues with Vue-hotjar-next.