React Native Error: Element Type is Invalid

Question

I need some help looking for where to start with this error I'm getting. Nimbus is the name of my app but I'm not sure what it means when it says check the render method of 'Nimbus'. Which render method? I have a functional component at app/index.js called Nimbus but obviously that doesn't render anything just returns a component.

I've checked similar error messages for RN on here and most people are just forgetting to export a component properly but I've checked my components and all are being exported correctly from what I can tell. The repo is below if you want to take a look at my project structure, etc. There are only a few files right now. Sorry I can't provide more information that's all I've got right now.

https://github.com/MaxwellGover/Nimbus

jevakallio · Accepted Answer · 2017-02-03 15:59:09Z

2

Because the AppContainer is a default export:

export default class AppContainer ...

And you proxy it from the containers/index.js like this:

export { AppContainer } from  './App/AppContainer'

This tries to import a named export called AppContainer. Instead, you'll need to import the default export explicitly:

export { default as AppContainer } from  './App/AppContainer'

answered Feb 3, 2017 at 15:59

jevakallio

36k4 gold badges109 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maxwellgover Over a year ago

Ok. I'll check that out. Before I was exporting like export AppContainer from './App/AppContainer (so without { }) and importing like import { AppContainer } from '~/containers' but this was throwing me some weird error. Is export { default as someComponent } the ideal way to handle exports then?

jevakallio Over a year ago

As far as I know, that is the only (?) syntax to take a default export of one module, and export it as a named export. Honestly I'm not sure whether the indirection you are applying in your sample codebase is worth the effort. If it grows large, then sure! But at small size, having the index files seems like unnecessary indirection.

Santosh Sharma · Accepted Answer · 2017-02-03 15:28:02Z

1

in your index.js you need to import component.

change following.

import { NimbusNavigator } from  './Navigator/NimbusNavigator'
import { SplashContainer } from './Splash/SplashContainer'
import { AppContainer } from  './App/AppContainer'

answered Feb 3, 2017 at 15:28

Santosh Sharma

2,2581 gold badge19 silver badges30 bronze badges

2 Comments

maxwellgover Over a year ago

I'm using babel-root-import so I add exports to containers/index.js so I can import them into other components as needed like import { AppContainer } from '~/containers so not sure if the above is correct in my instance.

Santosh Sharma Over a year ago

have u fix your issue with above answer?

Collectives™ on Stack Overflow

React Native Error: Element Type is Invalid

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related