Assistance Needed with Nuxt 2 - Highcharts Tilemap Module Not Loading

[tonimedina-pri]

I’m currently working on a project using Nuxt 2 and have integrated the nuxt-highcharts module for data visualization. However, I’ve encountered an issue when trying to use the tilemap module.

Here’s a brief overview of the problem:

Error Message
I’m receiving the following error in the browser console:

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=tilemap - missingModuleFor: tilemap

Component Usage

<highchart :modules="['tilemap']" :options="chartOptions" more />

Nuxt Configuration

{
...
  modules: ['nuxt-highcharts'],
  build: {
    transpile: [
      'highcharts/modules/stock',
      'highcharts/highcharts-3d',
      'highcharts/modules/sankey',
      'highcharts/modules/exporting',
      'highcharts/modules/cylinder',
      'highcharts/modules/funnel3d',
      'highcharts/highcharts-more',
      'highcharts/modules/map',
      'highcharts/modules/tilemap',
    ],
  }
...
}

Despite these settings, the tilemap module seems to be missing or not loading correctly. I’ve checked the documentation and various websites, but haven’t been able to resolve this issue.

Could you please help me figure out what might be going wrong or if there are additional steps I need to take to ensure the tilemap module is properly included and functioning?

Thank you in advance for your assistance!

[tonimedina-pri]

I actually found a solution! Adding this to the Vue component worked for me.

import * as Highcharts from 'highcharts'
import Tilemap from 'highcharts/modules/tilemap'
Tilemap(Highcharts)

[richardeschloss]

FYI, https://v2.nuxt.com/lts/ -- Nuxt 2 officially EOL'd 06/30/2024.