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.

3月 1, 2025

—

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 />;
}