📊

Next.jsでRechartsを使うと ConsoleにWarningが出る

2022/10/24に公開約1,300字

Rechartsとは

React向けのグラフライブラリ
https://recharts.org/en-US/

各種バージョン

"next": "12.1.0",
"react": "17.0.2",
"recharts": "2.1.15",

導入

公式記載の方法に沿って進める。
https://recharts.org/en-US/guide/installation

警告が表示される

Warning: Prop `id` did not match. Server: "recharts16-clip" Client: "recharts1-clip".

サーバーとクライアントでidが異なると言われる。idの名前は記述などによって数字の部分が変化した。

現時点での対処方法

同様の問題のisuueがあるので確認すると、Next.jsではdynamic importを使用すると回避できるとのこと。
https://github.com/vercel/next.js/issues/12863#issuecomment-628660240

Next.js DynamicImport のDocsはこちら。
https://nextjs.org/docs/advanced-features/dynamic-import

ちなみに、idを記述するだけでは他のエラーとなってしまう。これについては以下のissueにもある。
https://github.com/recharts/recharts/issues/2272

サンプル

表示用のデータを引数として渡したりする部分で若干手間取ったのでサンプルを置いておきます。
グラフ部分の記述はnamed exportで実装している想定です。

// 呼び出し元の実装
import dynamic from 'next/dynamic'
import { Chart } from 'component/Chart' //グラフの実装は通常通りに

export const Example = () => {
  return (
    <div>
      <MyChart />
    </div>
  )
}

//表示用の何かしらのデータ
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...]

type TProps = {
  data: { 略 }
}

const MyChartImpoet = dynamic<TProps>(
  () =>
    import('component/Chart').then((mod) => mod.Chart),
  { ssr: false }
)

function MyChart({ data }: TProps) {
  return <MyChartImpoet data={data} />
}

Discussion

ログインするとコメントできます