I Want to Use Recoil with 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.

When I tried to migrate a project that uses Recoil to Next.js, I ran into the following error.

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.

This post explains how to fix it.

Steps

Turn off SSR on a per-page or per-component basis

Wrap the page that was using Recoil as shown below.

Here's an example from my own case. Originally, I had written the logic that uses Recoil directly in diagnosis.tsx, but
instead of writing pages/diagnosis.tsx directly, I moved all the code into diagnosis.page.tsx,
and imported it dynamically from within 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を含むコード

In diagnosis.page.tsx, write the actual implementation — the part that calls the Recoil hooks. This way, the server side only ever returns an empty component, which avoids the error.

Make the React and ReactDOM versions match

If the above doesn't fix it, check the versions of React and ReactDOM. If the two don't match exactly, it can sometimes cause problems.