window not defined when start

[pxhoang1992]

I added a chart from Fusioncharts (this is chart: https://www.fusioncharts.com/charts/gauges/rating-meter-gauge) as a new dependency and trying to start the app it throws the following error and aborts: ReferenceError: window is not defined at Object. (/Users/phunghoang/Desktop/StockbookWebNew/node_modules/fusioncharts/fusioncharts.js:13:961) I followed these step: Install FusionCharts from npm $ npm install react-fusioncharts --save $ npm install fusioncharts --save My Project using Reactjs and Nextjs. Sorry My english not good?

[rohanoid5]

Hey @pxhoang1992 next.js executes the on the server side first then on the client side and window object is not available in the server side, it only exists in the client side. react-fusioncharts doesn't support next.js as of now due to this reason. You can check this link out to know more about this.

[pxhoang1992]

I followed the instructions in this link. I put the code in componentDidMount() but it still not working. You can help me? This is all my code: import React, { Component } from "react"; import ReactFusioncharts from "react-fusioncharts"; import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts";

class HealthGause extends Component { constructor(props) { super(props); this.state = {}; }

componentDidMount() { this.getDataSource(); }

getDataSource() { charts(FusionCharts); const dataSource = { chart: { caption: "Nordstorm's Customer Satisfaction Score for 2017", lowerlimit: "0", upperlimit: "100", showvalue: "1", numbersuffix: "%", theme: "fusion", showtooltip: "0" }, colorrange: { color: [ { minvalue: "0", maxvalue: "50", code: "#F2726F" }, { minvalue: "50", maxvalue: "75", code: "#FFC533" }, { minvalue: "75", maxvalue: "100", code: "#62B58F" } ] }, dials: { dial: [ { value: "81" } ] } }; return dataSource; }

render() { return ( < ReactFusioncharts type="angulargauge" width="100%" height="100%" dataFormat="JSON" dataSource={this.getDataSource()} /> ); } } }

export default HealthGause;

[rohanoid5]

@pxhoang1992 please update react-fusioncharts and check this.

[pxhoang1992]

angular gause fushion chart still not working, it still thows 1 errors: window not defined. How to fix it with me?

[rohanoid5]

import FusionCharts from 'fusioncharts';
import AngularGauge from 'fusioncharts/viz/angulargauge';
import ReactFusioncharts from "react-fusioncharts";

ReactFusioncharts.fcRoot(FusionCharts, AngularGauge);

@pxhoang1992 please use this way of importing.

[pxhoang1992]

import React, { Component } from "react"; // import ReactSpeedometer from "react-d3-speedometer"; // import styled from "styled-components"; import PropTypes from "prop-types";

import FusionCharts from "fusioncharts"; import AngularGauge from "fusioncharts/viz/angulargauge"; import ReactFusioncharts from "react-fusioncharts";

ReactFusioncharts.fcRoot(FusionCharts, AngularGauge);

const dataSource = { chart: { caption: "Nordstorm's Customer Satisfaction Score for 2017", lowerlimit: "0", upperlimit: "100", showvalue: "1", numbersuffix: "%", theme: "fusion", showtooltip: "0" }, colorrange: { color: [ { minvalue: "0", maxvalue: "50", code: "#F2726F" }, { minvalue: "50", maxvalue: "75", code: "#FFC533" }, { minvalue: "75", maxvalue: "100", code: "#62B58F" } ] }, dials: { dial: [ { value: "81" } ] } };

class HealthGause extends Component { constructor(props) { super(props); this.state = {}; }

render() { const { percentAsset } = this.props; // const maxPercent = percentAsset > 100 ? 100 : percentAsset; return ( <ReactFusioncharts type="angulargauge" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> ); } }

HealthGause.propTypes = { percentAsset: PropTypes.number };

HealthGause.defaultProps = { percentAsset: 0 };

export default HealthGause;

and then:

window is not defined ReferenceError: window is not defined at Object. (/Users/phunghoang/Desktop/StockbookWebNew/node_modules/fusioncharts/fusioncharts.js:13:961) at Module._compile (module.js:643:30)

[pxhoang1992]

It's still bro!!!

[siawo]

@pxhoang1992 We need a scale down version of your implementation since it is not replicated on our end.

[AyanBhadury]

@pxhoang1992 If you are using nextjs you may do it this way to resolve the problem

export default function NextFC() {
  const FusionCharts = require("fusioncharts");
  const Column2D = require("fusioncharts/fusioncharts.charts");
  const FusionTheme = require("fusioncharts/themes/fusioncharts.theme.fusion.js");
  const { default: ReactFC } = require("react-fusioncharts");
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);
return <ReactFC {...chartConfigs} />;
}

Then finally import the component to index.js

import dynamic from "next/dynamic.js";
const FC = dynamic(() => import("./next-fusioncharts.js"), { ssr: false });
export default function Index() {
  return (
    <div>
      <FC></FC>
    </div>
  );
}

Here is a demo for reference - https://www.dropbox.com/s/o2nm95fvad6nlfl/next-playground.zip?dl=0