nextjs - 💡(How to fix) Fix Importing react-dom in global-error makes app uninteractive [1 comments, 2 participants]

If you remove toast import from global-error.tsx the app works.

TL;DR

The issue can likely be resolved by ensuring that only one version of react-dom is used throughout the application, potentially by removing the explicit import of react-dom or using the version shipped with Next.js.

Guidance

• Verify that the react-dom version used in the component is the same as the one shipped with Next.js (19.2.0) to avoid version conflicts.
• Try removing the explicit import of react-dom from the component and rely on the version provided by Next.js.
• If the issue persists, attempt to import the toast component inside a page component to see if Next.js picks up its internal react-dom version, as mentioned in the additional context.
• Check the node_modules directory to ensure that there are no duplicate versions of react-dom installed.

Example

No explicit code example is provided as the issue seems to be related to version conflicts rather than code syntax.

Notes

The issue might be specific to the combination of Next.js version 16 and React version 19.2.0, and resolving the version conflict may require adjusting the imports or the project's dependencies.

Recommendation

Apply workaround: Remove the explicit import of react-dom from the component and rely on the version provided by Next.js, as this approach has been shown to work in the provided example.