Remix.run and Fusion chart

Question

Using react-fusioncharts in a Remix.run app doesn't seem to work? Any workarounds?

ReactFC.fcRoot(FusionCharts, Column2D, GammelTheme)

I'm getting this error:

ReferenceError: document is not defined

It makes sense since Remix use SSR, but even if I use this safe guard it fails (recommended approach from Remix docs):

if (typeof document !== 'undefined') {
    ReactFC.fcRoot(FusionCharts, Column2D, GammelTheme)
}

Answer 1

The component needs to be wrapped inside a ClientOnly component from remix-utils. This way, the component will render only on the client and will not be server-rendered.

// components/chart.jsx
import * as ReactFS from 'fusionchart'

export default function Chart() {
  // this component will only render on the client
  // and will not be server rendered
  return (
    {/* fusion chart components */}
  )
}

// routes/index.tsx
import {ClientOnly} from 'remix-utils'
import Chart from '~/components/chart'

export default function() {
  return (
    <ClientOnly fallback={<LoadingSkeleton />}
      {() => <Chart />}
    </ClientOnly>
  )
}