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に対応してないとき使えると思う
この記事が気に入ったらサポートをしてみませんか?