Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in React Native project
Matthew C.
—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:
...\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.
...\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.
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:
export default function CustomInput() { ... }
You can import a default export with any name:
import AnotherName from "CustomInput";
If you need to export multiple values from a file, you should use a named export:
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:
import { createFunction } from "helpers";
If you want to rename a named export when you import it, use the as
keyword:
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:
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:
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:
import CustomInput from "./CustomInput";
Suppose the CustomInput
component is a named export:
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:
import { CustomInput } from "./CustomInput";
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,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.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.