{"id":3284,"date":"2022-04-16T14:25:10","date_gmt":"2022-04-16T13:25:10","guid":{"rendered":"https:\/\/www.dpscomputing.com\/blog\/?p=3284"},"modified":"2022-04-16T14:25:12","modified_gmt":"2022-04-16T13:25:12","slug":"react-createelement-type-is-invalid-expected-a-string","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2022\/04\/16\/react-createelement-type-is-invalid-expected-a-string\/","title":{"rendered":"React.createElement: type is invalid — expected a string"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

One of the most common import\/export errors when using React<\/a> is the error:<\/p>\n\n\n\n

React.createElement: type is invalid -- expected a string<\/code><\/pre>\n\n\n\n
This somewhat cryptic error usually has a simple solution.  More often than note a quick notation fix can solve the issue.  <\/p>\n\n\n\n
What’s the problem?<\/h2>\n\n\n\n
The problem usually stems from the way your are exporting and importing a custom component.  <\/p>\n\n\n\n
For example, you may have created a custom component and then exported it as follows:<\/p>\n\n\n\n
export class MyNewComponent extends React.Component { ... }<\/code><\/pre>\n\n\n\n
Quite simply, this code is placed at the bottom of your react code extending the default React component (React.Component) and the export here will allow you to import it into your parent component as follows:<\/p>\n\n\n\n
import MyNewComponent from '.\/MyNewComponent';<\/code><\/pre>\n\n\n\n
This is normally where the dreaded error appears:<\/p>\n\n\n\n
createElement: type is invalid -- expected a string<\/code><\/pre>\n\n\n\n
What is the error telling me?<\/h2>\n\n\n\n
Let’s break it down.  <\/p>\n\n\n\n
The error is happening when you are creating a new element – in this case initiantiating your custom component using createElement.  <\/p>\n\n\n\n
The actual error is that it is expecting something different to be returned than what otherwise is being – in this case, it’s expecting a string.  <\/p>\n\n\n\n
The solution<\/h2>\n\n\n\n
Most of the time there is a really simple fix – the case of adding a ‘default’ statement to your export.  <\/p>\n\n\n\n
In your custom component go back to the export line at the bottom of the code and change it to read:<\/p>\n\n\n\n
export default<\/strong> class MyNewComponent extends React.Component { ... }<\/code><\/pre>\n\n\n\n
Doesn’t look much different right?  Try executing your code again and see if it works beautifully now.  Of course, if it moves onto another error you might have a little more debugging to do.  <\/p>\n\n\n\n
Now, full disclosure – this will not work everytime you have this error.  However, in my experience, more often than not this is a simple fix to the majority of times the createElement: type is invalid error is occurred.  It’s a common error among newbies to React but can also catch out experienced pros who are trying to rush through the latest development (we’ve all been there!)<\/p>\n\n\n\n
Let us know if it’s worked for you!<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the most common import\/export errors when using React is the error: This somewhat cryptic error usually has a simple solution. More often than note a quick notation fix can solve the issue....<\/p>\n","protected":false},"author":1,"featured_media":3285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"React.createElement: type is invalid -- expected a string.\n\n8 times out of 10, it's all down to one word!\n\n#React #ReactJS #ReactDevelopment #ReactError #ReactCreateElement #ReactCustomComponent","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2139],"tags":[2695,2890,2675,2888,2891,2886,2885,2887,2889],"class_list":["post-3284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-issues","tag-react","tag-react-custom-components","tag-react-development","tag-react-error","tag-react-import-export","tag-react-createelement-error","tag-react-createelement-type-is-invalid-expected-a-string","tag-reactjs","tag-reactjs-error"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2022\/04\/image-14.png","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-QY","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/3284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":1,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions"}],"predecessor-version":[{"id":3286,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions\/3286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media\/3285"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=3284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=3284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}