Element type is invalid

A JSX tag pointed at undefined or an object instead of a component, almost always because an import doesn’t match how the file exports it.

Browser console
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 `App`.

Also appears as

  • Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
  • Minified React error #130; visit https://react.dev/errors/130?args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Prompt to fix it

My React app crashes with "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined." Start from the component named in "Check the render method of" and check every component it renders. For each one, compare the import with the export in its file (default or named), and check for renamed or missing exports, index files that re-export components, and library names that don’t exist in the installed version. Fix the import or export so they match, and tell me which one was wrong.

Paste into Layerwise or any AI coding tool.

What it means

Every JSX tag needs something React can render: a built-in tag like div, or a component function. This error means a tag pointed at something else. got: undefined means the import came back empty, and got: object means it brought back a whole module or a plain object.

The cause is almost always a mismatch between an export and its import. A file with export default function Header needs import Header from './Header', and a file with export function Header needs import { Header } from './Header'. Depending on the bundler, a mismatch either fails right at the import or quietly gives undefined, which fails here when React renders it.

“Check the render method of App” names the parent. The broken import is one of the components that parent renders, so start in that file’s import list.

Common causes

  • The import style doesn’t match the export: a default import from a file with only named exports, or the other way around.
  • The component was never exported, or it was renamed and the import still uses the old name.
  • An index.ts file that re-exports components leaves one out or exports it under another name.
  • A name imported from a library doesn’t exist in the installed version, such as an icon or component renamed in a major release.

How to fix it

  1. Open the parent named in “Check the render method of …” and list the components it renders.
  2. For each one, open its file and match the import to the export: export default pairs with import Header from, and export function Header pairs with import { Header } from.
  3. If you can’t spot it, add console.log(Header) above the JSX. undefined or an object shows which import is wrong.
  4. For library components, check the name against the docs for the version in package.json.

Example fix

// src/components/Header.tsx uses a named export.
export function Header() {
  return <header>My app</header>;
}

// src/App.tsx
// Wrong here, because Header.tsx has no default export:
// import Header from './components/Header';
import { Header } from './components/Header';

export default function App() {
  return <Header />;
}

Related errors

All errors
./src/app/page.tsx:2:1 Module not found: Can't resolve '@/components/Header'

Module not found: Can't resolve

The bundler followed an import to a file or package that doesn’t exist under that name, so it couldn’t build the page.

[plugin:vite:import-analysis] Failed to resolve import "./components/Header" from "src/App.tsx". Does the file exist?

Failed to resolve import

Vite couldn’t find the file or package an import points to, so it can’t serve or build the page until the import matches something real.

ReferenceError: useState is not defined

X is not defined

The code used a name JavaScript can’t find anywhere, usually because of a missing import, a typo, or a Node-only global like process in the browser.

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch

Hydration failed

The HTML the server sent didn’t match what React rendered first in the browser, so React threw that part away and rebuilt it on the client.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs