🙆

HandsontableをNextJSで利用しようとしたらWindow is not defined エラーになった

2022/11/06に公開

NextJSは基本的にサーバサイドレンダリングで、対応していないライブラリをロードしようとするとこのエラーが出るらしい。

対策

以下の通り、ライブラリのロード方法を変更すればOK

# before
import { HotTable } from "@handsontable/react";

# after
const HotTable = dynamic(() => import("@handsontable/react"), {
  ssr: false, // <- ここで ssr を無効にするオプションを渡す
});

途中からこのエラーが出る様になって原因がわからず。ちょっとハマりました。気をつけましょう。

Discussion