Invariant Violation: 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.

[AAGSICON]

Is this a bug report?

yes App.js.txt User_List.php.txt

Have you read the Contributing Guidelines?

(Write your answer here.)

Environment

Steps to Reproduce

(Write your steps here:)

1. 2. 3.

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[EphraimMwanda]

my mistake!!! i was importing my Provider from 'redux' instead from 'react-redux' once i fixed that issue the error stopped showing up import { Provider } from 'redux' // WRONG!! i corrected the imports by: import { Provider } from 'react-redux' //CORRECT!!

after i fixed that the error stopped showing up!

happy coding people!

[notKvS]

Removing the curly braces from the name of the function or the class, which I am importing solved the error for me. Like- import NewHeader from './components/Header.js'; instead of import {NewHeader} from './components/Header.js';

[alexeykomov]

My reason of getting this error was that I've forgotten to add arguments section for function expression. It was

const Comp = (
    <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}/>
);

Instead of

const Comp = () => (
    <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}/>
);

Then Comp was rendered as child of other component. Hope this helps.

[paulopacitti]

I am facing the same issue on Linux . react-native-cli: 2.0.1 react-native: 0.50.3 node -v : v9.2.0 npm -v : 5.5.1

I'm having the same issue, and it's the same react-native version. Renaming with "export default" or importing correctly is not the problem. Any news? If I update it, it should work?

[mpp21x]

I get this issue as well. And I replace the TouchableOpacity import source 'from "native-base";' with 'from "react-native";'.it's work for me

[jeffreyongcay]

https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string

[mopilo]

I narrowed down my error to navigationOptions.

          ` static navigationOptions = ({ navigation }) => ({
    headerRight: typeof (navigation.state.params) === 'undefined' || typeof (navigation.state.params.headerRig) === 'undefined' ?
        <Icon name="camera" size={25} color='#000000' style={{ padding: 10 }} onPress={() => { navigation.navigate('ImagePost') }} /> : navigation.state.params.headerRig,

    headerLeft: (<Text style={{ padding: 10, fontSize: 16, color: '#000000' }}>Gallery</Text>),
});`

how can i fix this??

[SORNVENGE]

in file index.js the first i wrote like that: AppRegistry.registerComponent(appName, () =>); then i got the same error like above so i have changed it into =>AppRegistry.registerComponent(appName, () =>App);

[thevikasthakur]

I fixed this error after finding that i have been importing Image from native-base isntead of importing it from react-native.

Thanks. This helped me

[TimmyGOGO]

The same issue. I'm trying to pass redux store from first index.js to the next Components. The problem is when I'm passing the store to a simple Component, it's all right, but when I try to pass the store to decorated component, which is being exported like this: export default connect( mapToStateProps, mapDispatchToProps )(Component); then I get this error. I can't understand why is this happening. Is this because of "complex" store prop that shouldn't be passed to decorated Components?

[igorchru]

In my case it was a lack of attention, without realizing it was importing a class from a file that it did not exist. It was importing along with other classes from this same file, and only then did I realize that specifically this class was not from such a file. My suggestion, check 100% imports if it's right, it might be a simple mistake.

[nickhalldev]

This isn't the most helpful error message. my issue was in the import

import Provider from 'react-redux';

instead of

import { Provider } from 'react-redux';

[Lalee10]

When you "export default" something then in your imports you can name it anything you want and you don't need to use curly braces around the import for example:

Export: export default class A Then Import Like: import AnyNameYouWant from 'filepath'

But if you are exporting the class A like this:

Export: export class A Then Import Like: import { A } from 'filepath' // name must be the same as exported name

If you have a lot of exports from a single file e.g:

export class A
export class B

Then you can import them like:

import * as myClasses from 'filepath';
To access class A: myClasses.A
To access class B: myClasses.B

I was getting this error when I was not putting curly braces around my imports when they were not being exported as default

[fadilnatakusumah]

damn, @igorchru was right. It's all about attention. you see, i got same problem, turn out I was importing Card component from 'react-native' instead 'react-native-elements'. And my problem is solved.

pay attention to your code guys, stay sharp

[phoenixxd]

some kind of whitespace that was not the standard white space was left by code I copied from the internet. I removed everything between component tags and it started working.