ReactでSSR するときにApexchartsを使ってるとエラー出る時の対処

問題のエラー

GatsbyでBuildするときに出ました。

Next.js でも同じようなエラーが出る模様。

ERROR

"window" is not available during server side rendering.

[...略...]

svg.filter.js - v2.0.2 - 2016-02-24
https://github.com/wout/svg.filter.js
Copyright (c) 2016 Wout Fierens; Licensed MIT 

window is not defined

解決法

分割して読み込む

React ドキュメント [コード分割]

React.lazy と Suspense はSSRに対応していないので

Loadable Componentsを使う

npm install @loadable/component

React

import React from "react";
import Loadable from '@loadable/component'
const  Chart = Loadable(() => import("react-apexcharts"));

これで問題は起こらなかった。

おそらくだが、他パッケージでSSRに対応してないとき使えると思う