window not defined error when loading server side

[vasya10]

Hi,

I have a React component that loads server-side. In NodeJS, I get an error window not defined. AmCharts is bundled and rendered via webpack.

ReferenceError: window is not defined
at Object. (~/myproject/node_modules/amcharts3-react/index.js:1:1)

Code:
import React, { Component } from 'react'
import AmCharts from 'amcharts3-react' //window not defined error is here

const config = {...}
class MyChart extends Component {
render() { return <AmCharts {...config} />)
}

I am using the following workaround, but I don't think I should have to do this if AmCharts either can allow server-side rendering OR check presence of window.

var AmCharts = {}
if (process.browser) {
AmCharts = require('amcharts3-react')
}
class MyChart extends Component {
if (process.browser) return null;
render() { return <AmCharts {...config} />)
}

Of course a problem with the above approach is, I get the React warning in Browser console:

Warning: React attempted to reuse markup in a container but the checksum was invalid.

Is there anyway AmCharts React can check for this? Thanks!

[Pauan]

Hi @vasya10,

AmCharts is a client-side library only, it does not support server-side rendering at all.

This is not a limitation in amcharts3-react, it is a limitation in AmCharts itself.

I can add in some code in amcharts3-react which will cause it to be disabled on the server, but first I need to know: why are you trying to use amcharts3-react on the server?

[vasya10]

Hi @Pauan
I don't need to load amcharts3-react on server. But many of my components are loaded on server side. So if I compose amcharts in one of those components, the above error occurs during import/require. I can prevent rendering charts within the render() method (which is fine for me), but i'd like to avoid the workaround for import itself.

I think it will be useful to disable amcharts3-react on server side, since its client side only anyway.

[Pauan]

Hi @vasya10,

I changed it so that it will not break if window is not defined.

Please try out version 1.1.2 of amcharts3-react and let me know if it solves the problem for you.