{"id":3586,"date":"2016-04-06T12:04:41","date_gmt":"2016-04-06T12:04:41","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3586"},"modified":"2016-04-06T12:04:41","modified_gmt":"2016-04-06T12:04:41","slug":"fixing-react-error-element-type-invalid-expected-string-built-co-mponents-classfunction","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-react-error-element-type-invalid-expected-string-built-co-mponents-classfunction\/","title":{"rendered":"Fixing React error:  Element type is invalid: expected a string (for built-in co mponents) or a class\/function"},"content":{"rendered":"<p>In React, you can get this error:<\/p>\n<pre>\nInvariant Violation: Element type is invalid: expected a string (for built-in co\nmponents) or a class\/function (for composite components) but got: object. Check\nthe render method of `App`.\n<\/pre>\n<p>Typically on a render method that looks correct:<\/p>\n<pre lang=\"javascript\">\nrender: function () {\n  return (<MyComponent renderData={parsedData} \/>)\n}\n<\/pre>\n<p>This error indicates that &#8220;ComponentA&#8221; is the wrong type of thing, which often happens if you switch module exports to export a list of components instead of just the one.<\/p>\n<p>I.e. from:<\/p>\n<pre lang=\"javascript\">\nmodule.exports = MyComponent;\n<\/pre>\n<pre lang=\"javascript\">\nmodule.exports.ComponentA = MyComponentA;\nmodule.exports.ComponentB = MyComponentB;\nmodule.exports.ComponentC = MyComponentC;\n<\/pre>\n<p>The fix is to change what you import:<\/p>\n<pre lang=\"javascript\">\nlet ComponentA = require('.\/Components.jsx').ComponentA;\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In React, you can get this error: Invariant Violation: Element type is invalid: expected a string (for built-in co mponents) or a class\/function (for composite components) but got: object. Check the render method of `App`. Typically on a render method that looks correct: render: function () { return () } This error indicates that &#8220;ComponentA&#8221; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/fixing-react-error-element-type-invalid-expected-string-built-co-mponents-classfunction\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Fixing React error:  Element type is invalid: expected a string (for built-in co mponents) or a class\/function&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[302,455],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3586"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3586"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3586\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}