fusioncharts react error loading chunks failed

Question

import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import React from 'react';


// Resolves charts dependancy
charts(FusionCharts);

const dataSource = {
  chart: {
    caption: "Amazon Prime Video Categorization",
    theme: "fusion",
    viewmode: "1",
    showrestorebtn: "0",
    valuefontcolor: "#FFFFFF",
    yaxismaxvalue: "1000",
    yaxisminvalue: "0",
    divlinealpha: "0"
  },
  dataset: [
    {
      data: [
        {
          id: "01",
          label: "Home",
          x: "50",
          y: "900",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "02",
          label: "TV Shows",
          x: "20",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "02.1",
          label: "Thriller",
          x: "2",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "02.2",
          label: "Drama",
          x: "12",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "02.3",
          label: "Comedy",
          x: "22",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03",
          label: "Movies",
          x: "50",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "03.1",
          label: "Drama",
          x: "35",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.2",
          label: "Action",
          x: "45",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.3",
          label: "Horror",
          x: "55",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.5",
          label: "Thriller",
          x: "65",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "04",
          label: "Kids",
          x: "80",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "04.1",
          label: "Fantasy",
          x: "80",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "04.2",
          label: "Anime Cartoons",
          x: "90",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        }
      ]
    }
  ],
  connectors: [
    {
      stdthickness: "1.5",
      connector: [
        {
          from: "01",
          to: "03",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01",
          to: "04",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01",
          to: "02",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01.02",
          to: "04",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01.01",
          to: "02",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.3",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.3",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.4",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.5",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.6",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "04",
          to: "04.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "04",
          to: "04.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        }
      ]
    }
  ]
};

export default class HeatMap extends React.Component {
  render() {
    return (
      <ReactFusioncharts
        type="dragnode"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }
}

Here i am using fusioncharts with react.

But i am getting below error in my console.

errors:

Uncaught SyntaxError: Unexpected token <
fusioncharts.js:2202 Uncaught (in promise) Error: Error: Loading chunk 4 failed.
(missing: http://localhost:3000/fusioncharts.powercharts.js)
    at HTMLScriptElement.a (fusioncharts.js:103)
    at fusioncharts.js:2202

Do i need to install powercharts or treemaps separately for this.

PLease have a look

I checked with fusionchart team they are saying

Please note in order to render treemap chart you need to import fusioncharts.js, then fusioncharts.powercharts.js after that you need to include fusioncharts.treemap.js In order to render heatmap chart you need to import fusioncharts.js, then fusioncharts.powercharts.js ​

where i need to import not ale to understand

Answer 1

In order to render the drag node chart, you need to import the following in the app.js

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts, FusionTheme);

In order to render the treemap chart, you need to import the following

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import TreeMap from 'fusioncharts/fusioncharts.treemap';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts ,TreeMap,FusionTheme);