Vue3+Inertia集成Highcharts时出现TS2345类型不兼容错误求助

错误信息 #

错误1（导入类型不匹配） #

TS2345: Argument of type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin<any>'.   Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '((app: App<any>, ...options: any) => any) & { install?: ((app: App<any>, ...options: any) => any) | ((app: App<any>, options: any) => any) | undefined; }'.     Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '(app: App<any>, ...options: any) => any'.       Types of parameters 'vue' and 'app' are incompatible.         Type 'App<any>' is missing the following properties from type 'typeof import("D:/sites/bfc/node_modules/vue/dist/vue")': compileToFunction, compile, defineCustomElement, useCssModule, and 146 

错误2（编译阶段报错） #

webpack compiled successfully
ERROR in ./resources/ts/app.ts:39:17
TS2345: Argument of type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin<any>'.
  Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '((app: App<any>, ...options: any) => any) & { install?: ((app: App<any>, ...options: any) => any) | ((app: App<any>, options: any) => any) | undefined; }'.
    Type '(vue: typeof import("D:/sites/bfc/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type '(app: App<any>, ...options: any) => any'.
      Types of parameters 'vue' and 'app' are incompatible.
        Type 'App<any>' is missing the following properties from type 'typeof import("D:/sites/bfc/node_modules/vue/dist/vue")': compileToFunction, compile, defineCustomElement, useCssModule, and 146 more.
    37 |       .use<any>(store)
    38 |       .use<any>(i18n)
  > 39 |       .use<any>(HighchartsVue)
       |                 ^^^^^^^^^^^^^
    40 |       .use(Toaster, { position: 'top-right'})
    41 |       .use(VueTheMask)
    42 |       .use(ZiggyVue)

Found 1 error in 6553 ms.

重现步骤 #

• 在Vue 3组件中导入Highcharts；
• 在组件中使用Highcharts；
• 执行代码编译，触发上述类型错误。

环境信息 #

• Vue版本：^3.2.41
• Inertia版本：^1.0.6
• Highcharts版本：^11.2.0
• Highcharts-vue版本：^1.4.3

问题原因 #

highcharts-vue@1.4.3是为Vue 2设计的插件，其安装函数接收的参数是Vue构造函数，而Vue 3的app.use()方法传递的是App实例，二者类型定义不兼容，导致TypeScript编译报错。

解决方案 #

方案1：升级到Vue 3兼容版本（推荐） #

1. 卸载旧版插件：

npm uninstall highcharts-vue

2. 安装Vue 3兼容的官方插件（包名已变更为@highcharts/vue）：

npm install @highcharts/vue@^1.0.0

3. 修改代码中的导入语句：

// 替换旧导入
// import HighchartsVue from 'highcharts-vue'
import HighchartsVue from '@highcharts/vue'

4. 保留原有的app.use()调用即可，无需额外修改：

.createApp({ render: () => h(App, props) })
// ...其他use调用
.use(HighchartsVue)
// ...其他配置

方案2：临时忽略类型错误（不推荐长期使用） #

如果暂时无法升级插件，可通过// @ts-ignore跳过类型检查：

// @ts-ignore
.use<any>(HighchartsVue)

但该方案仅能临时绕过错误，无法从根本解决兼容性问题，后续可能引发其他潜在问题。

内容的提问来源于stack exchange，提问作者NAVEED SHAHZAD