I keep getting this error when running npm run dev
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.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
However, when I do npm run build and then npm run start the site loads fine. It is just on the dev server that it gives that error. The site also deploys to Vercel fine without any issues.
Any idea why I am getting this on the dev server and not production?
Also, I tried deleting the .next folder, also deleted node_modules, and installed all packages again, still gives an error. Deployed to different Vercel sites and all of them were fine.
Here is the full error:
Server Error
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.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ReactDOMServerRenderer.render
[project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (4053:17)
ReactDOMServerRenderer.read
[project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (3690:29)
Object.renderToString
[project]/node_modules/react-dom/cjs/react-dom-server.node.development.js (4298:27)
Object.renderPage
[project]/node_modules/next/dist/server/render.js (596:45)
Function.getInitialProps
node_modules/next/dist/pages/_document.js (150:43)
Object.loadGetInitialProps
[project]/node_modules/next/dist/shared/lib/utils.js (69:29)
renderDocument
[project]/node_modules/next/dist/server/render.js (609:48)
Object.renderToHTML
[project]/node_modules/next/dist/server/render.js (647:34)
runMicrotasks
<anonymous>
processTicksAndRejections
internal/process/task_queues.js (97:5)
I can guess 3 things:
there is a package or function that you are using only in dev environment, so it is skipped during production. Especially check your dev-dependency packages and your config files. If you have config that runs only dev environment and inside you are importing a module in a wrong way
in getServerSideFunctions based on your environment variable you might be returning undefined in dev environment but in production since you pass correct environment variables, you might get correct values. so make sure you are using the correct environment variables in your app.
Somehow, in the dev environment, you are exporting undefined if you have a ternary operation. In dev environment, your export resolved as undefined but based on condidion it exports the correct component in production
⛳ You can find the bug step by step if you fail on one step then go to the next one:
getInitialProps section.page folder should be exported as export default ComponentName.npm run build rename .next folder to .next-prod, then npm run dev, compare those 2 folders.it does not happen in the production build because production build does not catered for client side error. It will show the client side error https://nextjs.org/docs/messages/client-side-exception-occurred like this for most of the case in production build
So I believe your error does happen when you handle something on the client side.
You can check this issue by trying out a lot of things to check.. My recommendation is to use Typescript, ts lint, prettier and other tools to help debug this issue while you are developing it.
I do believe this would be a good start too How to check client-side JavaScript code for syntax errors?