Element type is invalid does not specify element

[churbis]

I'm using React Router as a...

framework

Reproduction

I have a complicated page that was rendering fine. then, when I refresh it I get this complicated error that does not point back to the file it originates from and I cannot find where it is coming from!

Oops!
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.

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.
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5591:15)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6181:18)
at renderChildrenArray (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6066:9)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5818:13)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6181:18)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5246:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6181:18)
at renderChildrenArray (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6066:9)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5818:13)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5297:13)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at finishFunctionComponent (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4766:13)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5208:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at finishFunctionComponent (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4766:13)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5208:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5535:15)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at finishFunctionComponent (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4766:13)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5208:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5535:15)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at finishFunctionComponent (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4766:13)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5208:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6181:18)
at renderChildrenArray (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6066:9)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5818:13)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at renderNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6181:18)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5246:11)
at retryNode (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5805:22)
at renderNodeDestructive (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5631:11)
at finishFunctionComponent (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4766:13)
at renderElement (/home/redacted/redacted/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5208:11)

System Info

System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 7.22 GB / 15.59 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v23.6.0/bin/npm

Used Package Manager

npm

Expected Behavior

1. When I have an error, it happens when the page first loads (not just when I refresh the page)
2. Error tells me which of my files this error originates from

Actual Behavior

Page loads fine, then when I refresh it I get this error.

[arikchakma]

@churbis how did you solve it? I am having the same issue

[churbis]

@arikchakma I had tried these separately but it wasn't until I tried them all at once that my project started working again (so I don't know if one, any, or all of them had any effect or was actually my error):

1. Turned off dev environment
2. Changed all my const ComponentFuncName = () => {} export default ComponentFuncName into export default function ComponentFuncName
3. Deleted all of my imports and used VSCode to re-add them

I do think the error could use some clarifying!

[arikchakma]

@churbis Thank you for your update🙏