I was upgrading NextJS v12 to NextJS v16.
I followed the upgrade guide step by step.
I run all required codemods.
I upgraded all the dependencies to the latest versions by running yarn upgrade.
The app is running fine, but somewhere in the corner, there is this unknown bug, which is hard to trace.
Runtime Error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of 'N'.
Every test passed, but upon doing manual testing, there was an error upon clicking the subscribe button.
At this point, intuition kicks in. Why not pinpoint the problematic code?
Why not check all the libraries used in that piece of code?
Sometimes, In nextJs and reactJs the dependencies also have their own upgrade guides that we must follow.
In my case, it was react-toastify, upon subscription, I was using react-toastify to dispatch a toast notification, and I forgot to follow its upgrade guide during the migration. Have you ever faced such errors? How do you tackle them?
Top comments (0)