Next.js で Recoil を使いたい　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.

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 のバージョンを見直してみてください。どちらも同じバージョン出ないと不具合が出る場合があります。