0

In my vue app I had following import in my component

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
treemapInit(Highcharts);

Now I have nuxt and I need to import this part only for client side, because it fails with an error on server-side.

How to do this? Please don't suggest me Nuxt plugins, since I want to use it local due to performance.

Thanks!

Roman Koblents
  • 1
  • 1

1 Answers1

0

The code executes twice - on server-side and then on client-side. The first run is done in an environment that lacks window and causes Highcharts to be loaded, but not initialized. The fix is to place all modules inits in if checking if Highcharts is an object or a function. It should be an object for module initialization:

import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";


if (typeof Highcharts === "object") {
  treemapInit(Highcharts);
}

Docs: https://github.com/highcharts/highcharts-vue#readme

Similar thread: https://github.com/highcharts/highcharts-vue/issues/73

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • I asume this will not help, as you will get an error on import statement from server side – Roman Koblents Oct 09 '22 at 11:36
  • Hi @Roman Koblents, Please check the proposed solution instead of assuming. It's the officially recommended way of using Highcharts with SSR. – ppotaczek Oct 10 '22 at 09:54