Type definitions are incompatible with Vue3

[j2L4e]

highcharts-vue.d.ts imports several types that Vue3 no longer exports.

See https://github.com/vuejs/core/issues/1370

node_modules/highcharts-vue/types/highcharts-vue.d.ts:1:23 - error TS2305: Module '"vue"' has no exported member 'PropOptions'.

1 import _Vue, { VNode, PropOptions, WatchOptionsWithHandler, WatchHandler, CreateElement } from "vue";
                        ~~~~~~~~~~~

node_modules/highcharts-vue/types/highcharts-vue.d.ts:1:36 - error TS2305: Module '"vue"' has no exported member 'WatchOptionsWithHandler'.

1 import _Vue, { VNode, PropOptions, WatchOptionsWithHandler, WatchHandler, CreateElement } from "vue";
                                     ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/highcharts-vue/types/highcharts-vue.d.ts:1:61 - error TS2305: Module '"vue"' has no exported member 'WatchHandler'.

1 import _Vue, { VNode, PropOptions, WatchOptionsWithHandler, WatchHandler, CreateElement } from "vue";
                                                              ~~~~~~~~~~~~

node_modules/highcharts-vue/types/highcharts-vue.d.ts:1:75 - error TS2305: Module '"vue"' has no exported member 'CreateElement'.

1 import _Vue, { VNode, PropOptions, WatchOptionsWithHandler, WatchHandler, CreateElement } from "vue";
                                                                            ~~~~~~~~~~~~~

node_modules/highcharts-vue/types/highcharts-vue.d.ts:7:42 - error TS2709: Cannot use namespace '_Vue' as a type.

7     interface ComponentOptions<V extends _Vue> {
                                           ~~~~

node_modules/highcharts-vue/types/highcharts-vue.d.ts:33:28 - error TS2507: Type 'typeof import("/redacted/node_modules/vue/dist/vue")' is not a constructor function type.

33 export class Chart extends _Vue {
                              ~~~~

[Denyllon]

Hi @j2L4e

Thank you for reporting the problem. Indeed, it looks like the bug which we should resolve immediately, but definitely need to have some time to investigate it. Meanwhile, I'm marking this issue with Bug label.

Kind regards!

[pwang2]

@Denyllon, just want to kindly ask if any update on this?

[Denyllon]

Unfortunately it's not resolved yet. I think in this case we need to figure out what we should do with our existing d.ts file, as the latest Vue version has completely different exported members. The most important thing here is to keep this wrapper compatible with both Vue 2 and 3 versions, what could be a bit problematic.

[pwang2]

It makes more sense to skip the default loading of d.ts and allow the dev tools to decide which one to load.

[IceBlizz6]

Do we have an update on this? Would be great to get proper type support for this library.

[Denyllon]

Unfortunately, it's not fixed yet. We'll schedule the work on type definitions soon.

[georgebohnisch]

Updates?

[pwang2]

before any fix available. I was adding "postinstall": "rimraf node_modules/highcharts-vue/types" to package.json scripts. and using Hightcharts's 150K lines of typing file. we might just need types for the chartOptions.

[jaclynt]

Any updates? Still encountering this issue.

[jszuminski]

I've prioritized this issue and put it in our backlog. I will keep you posted.

[rcheung9]

Still an issue. PR not approved.

[jszuminski]

You're right @rcheung9. I'm sorry, but I did not manage to resolve this yet as there have been prioritized Highcharts Export Server issues that I had to look into.

I will try to merge a fix and publish a new version by the end of January.

In the meantime, you can override the default types with these types that I've prepared:

// Types for Vue3
import { DefineComponent, App } from 'vue';
import * as Highcharts from 'highcharts';

export type ChartUpdateArgs = [boolean, boolean, Highcharts.AnimationOptionsObject];

declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        highcharts?: typeof Highcharts;
    }
}

export interface ChartComponentOptions {
    constructorType?: string;
    options?: Highcharts.Options;
    callback?: Highcharts.ChartCallbackFunction;
    updateArgs?: ChartUpdateArgs;
    highcharts?: typeof Highcharts;
    deepCopyOnUpdate?: boolean;
}

export interface ChartProps {
    constructorType?: string;
    options: Highcharts.Options;
    updateArgs?: ChartUpdateArgs;
    callback?: Highcharts.ChartCallbackFunction;
}

export const Chart: DefineComponent<ChartProps>;

export default function install(app: App, options?: ChartComponentOptions): void;

which works well with the latest version of Vue.

[Pedrocanoas]

this error is related?

  "dependencies": {
    "axios": "1.6.7",
    "highcharts": "^11.3.0",
    "highcharts-vue": "^1.4.3",
    "moment": "^2.30.1",
    "vue": "^3.4.15",
    "vue-router": "^4.0.11"
  },

[jszuminski]

Yes @Pedrocanoas, this comment might be related if you're using TypeScript. I have created a new branch for a Vue3 full support release: https://github.com/highcharts/highcharts-vue/pull/258 which I schedule for this week.

[jszuminski]

@Pedrocanoas did not manage to release it yet, currently on the testing phase. Feel free to install the beta version from the GitHub branch like this:

"dependencies": {
    "vue": "^3.4.15",
    "highcharts": "10.3.3",
    "highcharts-vue": "https://github.com/highcharts/highcharts-vue.git#vue3/types"
  },

Everything should work as expected, but please try it out and let me know about your experience.

[mcenkar]

Hi @jakubSzuminski, I was facing same issue and your beta version solved all issues!

[hexagon06]

@jakubSzuminski The feature branch version works like a charm for me! Any idea when the new version will be out so I can update the dependency version?

[jszuminski]

We've just released v2.0.0. Closing via https://github.com/highcharts/highcharts-vue/pull/258.

Please let me know if there's anything that does not work as expected. We'll try to fix it asap.