CODEWITHSUNDEEP
reactjswebpackgatsby
maison.m
maison.m

Reputation: 863

React - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

I am really at my wits end with this. I'm trying to build & deploy a Gatsby site and I am getting the above error after trying to build the static HTML pages. The CSS and JS files all build without issue.

I get a WebpackError with this as well: WebpackError: Minified React error #130; Which can be found here: #130

Gatsby's Docs suggest that this #130 error is due to mixing up import and require calls in the same file. I have been through my entire directory hunting for something like this, and I can not find anywhere where this occurs. I don't seem to have any of the other issues the Gatsby docs also suggest for this error either.

Has anyone else ran into this problem, and if so, what was the solution for you? I'm not sure how to go about posting code, because I don't even know what the problem is here. Everything compiles and runs locally without issue on the dev server, which is kind of why I am stumped. How can the code compile and work perfectly locally but not build & deploy?

Upvotes: 2

Views: 579

Answers (1)

maison.m
maison.m

Reputation: 863

This was solved. For anyone building a site with Gatsby, the issue is that I had a /styles directory for my styled components located in the src/pages directory.

This throws an error when building because Gatsby expects JS files inside of the /src/pages directory to only be exported React components, which in turn represent a page of the website.

I moved the styles into /src and voila. This caused the error because styled components are JS files, and as mentioned above, Gatsby is not expecting anything else other than exported React components inside of /src/pages.

Upvotes: 3

Related Questions