search

gaearon / react-transform-boilerplate

A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.
Creative Commons Zero v1.0 Universal
3.36k stars 430 forks source link

console shows error: Uncaught Invariant Violation #110

Closed purezen closed 8 years ago

purezen commented 8 years ago

I am making an app based on this boilerplate. Ref: https://gist.github.com/purezen/e421917fca4c05bb2c05

The app is building fine, but my console shows this error: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

alex-wilmer commented 8 years ago

Are TaskList.js and App.js in the same folder?

alex-wilmer commented 8 years ago

Also, in the boilerplate's index.js, App is not a default export. Double check your import / export to make sure they match up.

purezen commented 8 years ago

Yes, they are in same folder. And I have tried with and without default export.

alex-wilmer commented 8 years ago

Are you able to post the repo not just gist?

gaearon commented 8 years ago

The problem is exactly what it says:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

If you set a breakpoint where it fails, you’ll see that you call createElement (that’s what JSX desugars to) with undefined instead of a proper type. This usually means that your import was invalid and you imported undefined by mistake. Something like https://github.com/benmosher/eslint-plugin-import can help you avoid such mistakes.

Unfortunately it’s impossible for us to help you without an exact project reproducing the issue, as opposed to an incomplete gist. But I’m sure you’ll find it if you use something like “break on all exceptions” in Chrome scripts debugger and notice which import ends up being undefined.

Cheers!