Recoil を使ったプロジェクトをNext.js に移行しようとしたところ以下のようなエラーが出てしましました。
TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined.この記事はこれを解決するための記事です。
やり方
ページまたはコンポーネントごと、SSRをオフにする。
今までRecoilを使っていたページを下記のようにラップしてしまいます。
私の場合の例を出しますと。元々はdiagnosis.tsx にrecoil を含む動作を書いていたたのですが、
pages/diagnosis.tsx を直接書くのではなく、diagnosis.page.tsx に全てコードを移行し、
diagnosis.tsx の中で動的にインポートしました。
// pages/diagnosis.tsx
import dynamic from 'next/dynamic';
// diagnosis.page.tsx をクライアントサイドのみで読み込む
const DiagnosisPageComponent = dynamic(() => import('../diagnosis.page'), {
ssr: false,
});
export default function DiagnosisPage() {
return <DiagnosisPageComponent />;
}元々のRecoilを含むコードdiagnosis.page.tsx には実際の実装（Recoil フックを呼び出す部分）を記述します。こうすると、サーバーサイドでは空っぽのコンポーネントしか返さないため、エラーを回避できました。
React と ReactDOM のバージョンを一致させる
以上で解決できない場合はReact と ReactDOM のバージョンを見直してみてください。どちらも同じバージョン出ないと不具合が出る場合があります。
