Sentry Answers>React>

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in React Native project

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in React Native project

Matthew C.

The ProblemJump To Solution

You have a React Native component that imports JavaScript modules such as React components from another file, for example, a component called SignInScreen. When you run the application, you get these errors in your browser dev tools console:

Click to Copy
...\SignInScreen.js:16 Warning: React.jsx: 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 your code at SignInScreen.js:16.
Click to Copy
...\node_modules\react-dom\cjs\react-dom.development.js:28441 Uncaught 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 `SignInScreen`.

As the error messages imply, the error may be caused by not exporting an imported component or mixing up default and named imports. The SignInScreen component tried to render an imported component that was undefined.

The Solution

First, check to make sure that the imported component is exported. If it is then check that the imported component is exported and imported correctly.

A file can only have one default export:

Click to Copy
export default function CustomInput() { ... }

You can import a default export with any name:

Click to Copy
import AnotherName from "CustomInput";

If you need to export multiple values from a file, you should use a named export:

Click to Copy
export const createFunction = (input) => { } export const arrayValues = [1, 2, 3, 4, 5];

When you import a named export, you need to import it using the exact export name:

Click to Copy
import { createFunction } from "helpers";

If you want to rename a named export when you import it, use the as keyword:

Click to Copy
import { createFunction as createFunctionHelper } from "helpers";

This may be useful to avoid naming conflicts.

For example, you might have a SignInScreen component such as the following:

Click to Copy
import React from "react"; import { View } from "react-native"; import CustomInput from "./CustomInput"; const SignInScreen = () => { return ( <View> <CustomInput /> </View> ); }; export default SignInScreen;

If the CustomInput component is a default export:

Click to Copy
import { TextInput } from "react-native-web"; export default function CustomInput() { return <TextInput defaultValue="You can type in me" />; }

Import the CustomInput component into the SignInScreen component without adding curly braces around the imported component:

Click to Copy
import CustomInput from "./CustomInput";

Suppose the CustomInput component is a named export:

Click to Copy
import { TextInput } from "react-native-web"; export function CustomInput() { return <TextInput defaultValue="You can type in me" />; }

In this case, import the CustomInput component into the SignInScreen component with curly braces around the imported component:

Click to Copy
import { CustomInput } from "./CustomInput";
  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.