Vue3项目使用highcharts-vue时热力图无法正常渲染问题求助

问题现象 #

项目中使用highcharts-vue实现图表功能，折线图、面积图等基础图表可正常运行，接入需要独立导入模块的热力图时，页面无内容渲染，控制台输出警告：

[Vue warn]: Component is missing template or render function. 
  at <Anonymous options=

相关实现代码：

• 父组件Parent.vue

<!-- Parent.vue -->
<template>
  <HeatmapChart />
</template>

<script setup>
import HeatmapChart from 'src/components/charts/HeatmapChart.vue'
</script>

• 热力图子组件HeatmapChart.vue

<!-- HeatmapChart.vue -->
<template>
  <Highcharts :options="chartOptions" />
</template>

<script setup>
import Highcharts from 'highcharts'
import HeatMap from 'highcharts/modules/heatmap'

HeatMap(Highcharts)

const chartOptions =  {
   chart: {
     type: 'heatmap',
     // 其余配置省略
   }
   // 其余配置省略
}
</script>

故障原因 #

核心问题是导入命名冲突+未正确导入highcharts-vue组件：

1. 代码中import Highcharts from 'highcharts'导入的是Highcharts JS核心库，属于普通JS对象，不是可供Vue解析的组件
2. 未单独导入highcharts-vue提供的<Highcharts>Vue组件，模板中直接使用该标签时，同作用域下同名的核心库变量覆盖了全局注册的Highcharts组件，Vue会把非组件类型的普通对象当做组件解析，最终抛出缺失模板/渲染函数的警告
3. 之前基础图表能正常运行，是因为其他图表组件未出现同名变量覆盖问题，可正常读取全局注册的Highcharts组件。

修复方案 #

修改HeatmapChart.vue的脚本部分，区分核心库和Vue组件的导入命名，补全组件导入，修正后代码如下：

<!-- HeatmapChart.vue -->
<template>
  <Highcharts :options="chartOptions" />
</template>

<script setup>
// 导入Highcharts核心库，改名避免和组件命名冲突
import HighchartsCore from 'highcharts'
// 导入highcharts-vue提供的Vue组件
import Highcharts from 'highcharts-vue'
// 导入热力图模块
import HeatMap from 'highcharts/modules/heatmap'

// 给核心库挂载热力图扩展模块
HeatMap(HighchartsCore)

const chartOptions =  {
   chart: {
     type: 'heatmap',
     // 补全原有图表配置
   }
   // 补全原有图表配置
}
</script>

如果采用全局注册highcharts-vue的方案，需要严格保证执行顺序：先加载热力图模块并挂载到Highcharts核心库，再执行app.use(HighchartsVue)完成全局组件注册，避免模块未加载就注册组件导致的图表类型识别异常。

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