0

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)
AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Rain Man
  • 1,163
  • 2
  • 16
  • 49

4 Answers4

1

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

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
1

⛳ You can find the bug step by step if you fail on one step then go to the next one:

  1. Try to comment out the getInitialProps section.
  2. Components in page folder should be exported as export default ComponentName.
  3. Check all imported components, some of them may be undefined.
  4. Check all environment variables you use.
  5. Make production build npm run build rename .next folder to .next-prod, then npm run dev, compare those 2 folders.
sultan
  • 4,543
  • 2
  • 24
  • 32
0

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?

Borris Wiria
  • 466
  • 4
  • 8
0

Try default export the element, this error might be because the 'Element' is not properly exported or the data you are trying to render from that component or Element is undefined, check your Element and also check if that element is imported correctly or not.