Server Error TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')

[Eniolayo]

Server Error: TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED') in Next.js

Description:

I encountered a server error while using react-country-dropdown in a Next.js project. The error message is:

This occurred when attempting to use react-country-dropdown in a page that is server-side rendered in Next.js.

Reproduction:

• Using react-country-dropdown inside a Next.js component results in the error when the page is loaded.
• The error happens because Next.js tries to render the component on the server, and it accesses React internals that are not available during SSR.

Steps to Reproduce:

1. Install react-country-dropdown in a Next.js project.
2. Import and use the component inside any page.
3. Run the project and observe the server-side error.

Environment:

• next: 14.2.5
• react: 18
• Node.js version: 18.x.x
• react-country-dropdown: 3.0.0

Solution:

I was able to fix the issue by dynamically importing the ReactCountryDropdown component with ssr: false, which disables server-side rendering for this component.

import dynamic from 'next/dynamic';

const ReactCountryDropdown = dynamic(() => import("react-country-dropdown"), {
  ssr: false,
});

Request:

It would be helpful if this workaround could be documented in the README for Next.js users, or the component could handle the SSR scenario automatically.