React: Element type is invalid: expected a string or a class/function but got: undefined

The Context

Working on a legacy React codebase, I came across a bug that stumped me for a bit.

The Problem

My Vite app crashed to the error boundary and with the following message:


Oops, something went wrong!

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 "Footer'. at createFiberFromTypeAndProps (http://.../node_modules/.vite/deps/chunk-DEI2V7K7.js

A quick google and reading the error message suggests that a component’s import is incorrect. I checked this and it was fine (I hadn’t changed that since it was last working).

It’s clear that something is undefined and React is throwing somewhere deep (createFiberFromTypeAndProps).

The message points to the Footer component, more specifically the render method–I was unsure if this meant I should be looking at the JSX or the body of the functional component.

The Solution

It turns out that the error is in the JSX, when you try to render a named component that is undefined this is the error that you see. It is so commonly caused by incorrect defaults, that an error was added to React to point people in the right direction.

In my case, I found the following code:


const Footer = ({ data }) => {
   ...
   const CenterComponent = COMPONENT_MAP[_get(data, "component")] // using lodash
   
   return (
      ...
      <CenterComponent text="footer text" ... />
		  ...
   )
}

const COMPONENT_MAP = {
	componentOne: ({ text }) => <>{text}</>,
	componentTwo: ({ text }) => <>{text}</>,
	componentThree: ({ text }) => <>{text}</>,
}

It’s easy to spot when the default is isolated, but to point it out, when data (or data.component) is undefined, then CenterComponent itself is undefined, which gets passed to React.

Ultimately, the transpiler will convert your component to a React.createElement(CenterComponent), and React createElement does not support passing in undefined.

It took me a little while to find the defective code in a long file and this was something fairly new to me, as neither me, nor the people I work with define components like this–I’ve seen components defined within components, but I see this kind of pattern less often.

The Code

The quick fix is to add an undefined check–the long-term solution is to refactor this pattern (we shouldn’t be defining components dynamically within the body of a functional component).


// Quick Fix
const Footer = ({ data }) => {
   ...
   const CenterComponent = COMPONENT_MAP[_get(data, "component")]
   
   return (
      ...
-      <CenterComponent text="footer text" ... />
+      {CenterComponent !== undefined && <CenterComponent text="footer text" ... />}
		  ...
   )
}

const COMPONENT_MAP = {
	componentOne: ({ text }) => <>{text}</>,
	componentTwo: ({ text }) => <>{text}</>,
	componentThree: ({ text }) => <>{text}</>,
}