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

Question

I am building a react native project I get the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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.
Here is my code.
import React from 'react';
import { View,Image,StyleSheet,useWindowDimensions } from 'react-native';
import Logo from'../../../assetss/images/logo.png';
import CustomInput from '../../components/CustomInput';
const SignInScreen = () => {
const {height} = useWindowDimensions();
return (
<View style= {styles.root}>
<Image source={Logo} style ={[styles.logo, {height: height * 0.3}]}
resizeMode="contain" />
<CustomInput />
</View>
);
};
const styles = StyleSheet.create({
root: {
alignItems: 'center',
padding: 20,
},
logo:{
width: 1000,
maxWidth: 1100,
maxHeight: 200 ,
}
})
export default SignInScreen

Answer 1

There is a difference between named exports and default exports.
Named Export
Can be used for top level values of a module, e.g.
export const fetch = () => {
}
export const Component = () => {
return <></>
}
The above can be imported using
import { fetch, Component } from "./MyModule"
Notice the curly braces.
Default Export
A default export can only be used once per file, e.g.
const Component = () => {
return <></>
}
export default Component;
The above can be imported using
import Component from "./MyModule"
Notice that we have not used curly braces here.
The error message
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
tells us that we have mixed this up for some of our imports. Your imports for View, Image, StyleSheet and useWindowDimensions are correct. Hence, either CustomInput or Logo is not correctly imported (or exported; it depends on how we want to see it).
You are assuming default exports for both. Check if they are exported using default export.
If you do not want to use default exports, then you need to change your import statements to the following.
import { CustomInput } from '../../components/CustomInput';
Furthermore, check that the import paths, e.g. '../../../assetss/images/logo.png' and '../../components/CustomInput', are correct.

Answer 2

In my case the problem was I created all components but didn't save the files. I don't use autosave, so I created all components, imported them to my Home component, but they were not saved so that error was thrown. Once I saved each file, the error disappeared.

Answer 3

Sounds like you had an index.js file in your CustomInput folder, so when you wrote
import CustomInput from './../../components/CustomInput';
it thought you wanted
import {CustomInput} from './../../components/CustomInput/index.js';
but really you wanted
import CustomInput from './../../components/CustomInput/CustomInput.js';
This error
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 ..."
shows up for many different types of errors that directly or indirectly eventually boil down to export/import default/named. Besides your case where it thought you were looking in index.js for a {named} in curly braces export/import, you can also get that error message if you accidentally misspell your named import, for example: import {Flatlist} with a lowercase l instead of import {FlatList} with an uppercase L.

Answer 4

thanks for your help my probl/em is solved b/y just putting .js . For example import CustomInput from './../../components/CustomInput/CustomInput.js

Answer 5

From the code you have shown, it seems like assets is spelt wrong. You can check if the actual folder is spelt like that.

Answer 6

Faced while unit test in react
Notices the same issue while writing unit test case using jest and react-testing-library.
Problem: It may be due to wrong way of mocking the component using jest.mock
Problem Situation:
jest.mock('./components/notes-list', () => {
return {
NotesList: () => <div data-testid='note-list-component'>Hello World</div>,
};
});
Solution
jest.mock('./components/notes-list', () => {
const NotesList = () => (
<div data-testid='note-list-component'>Hello World</div>
);
return NotesList;
});

Answer 7

This error message is indicating that there is an issue with a component in your React application. Specifically, React is expecting the component to be either a string (for built-in components such as div or span) or a class or function (for custom components defined by you). However, in this case, the component is undefined.
There are a few potential causes for this error:
Forgetting to export the component: If the component is defined in a separate file, make sure that it is properly exported at the end of the file. For example:
// MyComponent.js
import React from 'react';
class MyComponent extends React.Component {
render() {
return <div>Hello, World!</div>;
}
}
export default MyComponent;
Mixing up default and named imports: If you are importing the component into another file, make sure that you are using the correct syntax. For example:
// App.js
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return <MyComponent />;
}
export default App;
If you're still encountering the error after checking these potential causes, it may be helpful to look at the surrounding code to see if there is anything else that could be causing the issue. Additionally, make sure that the version of React that you are using is compatible with the version of react-dom that you have installed.