【Next.js】React18にあげたらgoogle-map-reactでエラーが発生した

Next.js 13で既存のアプリを動かしてみたらgoogle-map-reactで次のようなエラーが発生した

Next.js: TypeError: Cannot read properties of undefined (reading 'getChildren')

以下のISSUEによるとNext.jsというより、React@18とのバージョン互換性の問題みたい

github.com

超暫定的な対応としてはnext.config.jsでreactStrictMode: falseにすると動くが

const nextConfig = {
  reactStrictMode: false,
}

reactStrictModeはReact アプリケーションのパフォーマンスやセキュリティの問題を検出するための機能なので、長期的にfalseにするのはオススメされない

このライブラリを使うならこのISSUEが解決されるのを待たなければならないが、このライブラリを使うのをやめて

@googlemaps/react-wrapperと@types/google.mapsを使う方法もあるみたい

• https://developers.google.com/maps/documentation/javascript/react-map
• https://developers.google.com/maps/documentation/javascript/using-typescript

ちょっと様子をみる