How do I fix "Minified React error #130" (Element type is invalid)?

A minified error gives you a number and a link instead of the message you need, which is a rough start when a screen won’t load. Error #130 is one of the easier ones to track down, though. The full message is “Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined”, sometimes with object at the end. In plain words, one of your JSX tags points at something that isn’t a component.

Why it happens

The args[] values in the link tell you what React received. The first is what it got in place of a component, such as undefined or object, and the second is always empty in a production build. The numbered form comes from React’s production build for the web, so you’re most likely looking at the web version of your app. On iOS and Android, the same mistake shows the full sentence instead of a number.

If the first value is undefined, look for an import that found nothing:

• a default import of a named export, like import Card from "./Card" when the file has export function Card, or the reverse
• a component that was never exported from its file
• a name that doesn’t exist in a library, from a typo or from a library update that renamed or moved it
• a circular import, where two files import each other and one of them is still undefined when it’s used

If it’s object, check whether you imported the module instead of the component:

• import * as Card from "./Card" followed by <Card />
• require("./Card") without .default
• a file that exports JSX instead of a component, like export default <Card />

How to fix it

1. Get the full message. Run npx expo start and press W to open the web app in development. We’d start here, because the development message adds a line like “Check the render method of ProfileScreen”, which names the component whose JSX has the bad tag.

2. Find the bad import in that component by logging what you imported. Look for one that logs as undefined, or as a module with your component tucked inside it, such as { default: ... } or { Card: ... }:

   console.log({ Card, Avatar, PrimaryButton });

3. Match the import to the export:

   // Card.tsx
   export function Card() {
     /* ... */
   }
   
   // Before
   import Card from "./Card";
   
   // After
   import { Card } from "./Card";

4. Break circular imports by moving whatever both files share into a third file that neither of them imports from. In development, a “Require cycle” warning in the terminal lists the files involved.

5. Check the library’s changelog if this started after an update, since a component may have moved to a different export.

How you know it’s fixed

The screen renders in development without the “Element type is invalid” error, and the same screen loads in the web build you deploy.

If it still happens

If the component it names comes from a library, check that you import it the way that library’s docs show for the version you have installed. Running npx expo install --check also finds packages whose versions don’t match your Expo SDK. If you’ve already fixed the import and still see the error, restart with npx expo start --clear so you’re not running an old bundle.