如何使用 React Fusion Charts 修复漏斗图的 ChunkLoadError？答案

【问题标题】：How to fix a ChunkLoadError for a Funnel chart with React Fusion Charts?如何使用 React Fusion Charts 修复漏斗图的 ChunkLoadError？
【发布时间】：2021-02-02 13:51:16
【问题描述】：

我正在尝试使用 React 中的以下组件（通过多个父组件呈现）从 Fusion Charts 呈现 Funnel Chart：

import React, { Component } from "react";

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

// Resolves charts dependency
charts(FusionCharts);

const dataSource = {
  chart: {
    caption: "Website visits",
    subcaption: "Purchase - Conversion analysis for last year",
    decimals: "1",
    showvalues: "1",
    plottooltext: "$label: <b>$dataValue</b>",
    plotfillalpha: "70",
    theme: "fusion",
    streamlineddata: "0"
  },
  data: [
    {
      label: "Website Visits",
      value: "17362"
    },
    {
      label: "Downloads",
      value: "8039"
    },
    {
      label: "Checked Pricing",
      value: "5509"
    },
    {
      label: "Asked for Quotation",
      value: "3962"
    },
    {
      label: "Purchased",
      value: "2397"
    }
  ]
};

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

在页面加载时，我在浏览器控制台中收到此错误：

Uncaught SyntaxError: Unexpected token '<'
4.js:35464 Uncaught (in promise) Error: ChunkLoadError: Loading chunk 5 failed.
(missing: http://localhost:8000/dashboards/fusioncharts.widgets.js)
    at Function.a.e (4.js:35464)
    at d (4.js:35464)
    at Function.<anonymous> (4.js:35464)
    at i (4.js:35464)
    at o (4.js:35464)
    at f (4.js:35464)
    at e.t.chartType (4.js:35464)
    at new e (4.js:35464)
    at new h (4.js:35464)
    at ReactFC.renderChart (4.js:122201)
    at 4.js:35464

我尝试添加行import "fusioncharts/fusioncharts.widgets";，它消除了错误但图表没有显示。关于如何解决此问题的任何想法？

【问题讨论】：

标签： reactjs fusioncharts

【解决方案1】：

将导入语句替换为以下代码，并重新加载应用清除浏览器缓存

import FusionCharts from 'fusioncharts';
import Widgets from 'fusioncharts/fusioncharts.widget';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

【讨论】：

【解决方案2】：

上述问题的解决方案是从“fusioncharts/fusioncharts.charts”导入图表，而不是从“fusion-charts/fusion-charts.widgets”导入图表。上述原因是漏斗是从“fusion-charts/fusion charts.widgets”导出的（你可以检查一下，只需转到 node_modules 并在 find widgets 文件夹中找到 fusion-charts）而不是从“fusion-charts /fusion-charts.charts”。有关信息，您可以查看 Fusion 文档。

【讨论】：