React.createElement: type is invalid when using multiple Helmet React Typescript

Question

I have a seo component which gives me React.createElement error, i have been struggling to get it work from last 2 days, can someone please help me to solve this issue

SeoModule.tsx

import * as React from 'react';
import Helmet from 'react-helmet';
import FacebookSeo from './FacebookSeo';
import TwitterSeo from './TwitterSeo';

type propTypes = {
    ...
}

export default class SeoModule extends React.Component<propTypes> {
    render() {
        return (
            <> 
                <Helmet title = {seo.title}>
                    <script type="application/ld+json">{
                        JSON.stringify(structuredData)
                    }</script>
                </Helmet>    
                <FacebookSeo
                    desc={seo.desc}
                    image={seo.image}
                    title={seo.title}
                    type={event ? 'event' : null}
                    url={seo.url}
                />
                <TwitterSeo
                    type={event ? 'summary_large_image' : null}
                    title={seo.title}
                    image={seo.image}
                    desc={seo.desc}
                    username={twitter}
                />  
            </>
        )
    }
}

and FacebookSeo.tsx

import * as React from 'react';
import Helmet from 'react-helmet';

type propTypes = {
  ...
};

export default class FacebookSeo extends React.Component<propTypes> {
  render() {
    const {url, type, title, desc, image} = this.props;
    return (
      <Helmet>
        {url && <meta property="og:url" content={url} />}
        {type && <meta property="og:type" content={type} />}
        {title && <meta property="og:title" content={title} />}
        {desc && <meta property="og:description" content={desc} />}
        {image && <meta property="og:image" content={image} />}
      </Helmet>
    );
  }
}

and TwitterSeo.tsx

import * as React from 'react';
import Helmet from 'react-helmet';

type propTypes = {
  ...
};

export default class TwitterSeo extends React.Component<propTypes> {
  render() {
    const {username, type, title, desc, image} = this.props;
    return (
      <Helmet>
        <meta name="twitter:card" content={type} />
        {username && <meta name="twitter:creator" content={username} />}
        {title && <meta name="twitter:title" content={title} />}
        {desc && <meta name="twitter:description" content={desc} />}
        {image && <meta name="twitter:image" content={image} />}
      </Helmet>
    );
  }
}

But the above code gives me an error

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of SeoModule.

6 | export default (props) =>

Is the empty ` <>` tag in `SeoModule` is the reason for it or its a typho ?? — Panther, Nov 28 '18 at 08:26
we need to wrap render with parent element when using multiple classes or else it throws error — sam, Nov 28 '18 at 08:30
Are you using the latest react and latest babel react-jsx plugin, as this syntax was introduced in 16.2 ? — Panther, Nov 28 '18 at 08:34
The `react-helmet` doc specifies to import like `import {Helmet} from "react-helmet";`. does that help ? — Panther, Nov 28 '18 at 08:40
@sam No problem! Make sure to tick question answered to close the question :) — Ben Swindells, Nov 28 '18 at 08:53

score 2 · Accepted Answer · answered Nov 28 '18 at 08:51

Answer:

 export default class FacebookSeo extends React.Component<propTypes> {
  render() {
    const {url, type, title, desc, image} = this.props;
    return (
    <div>
      <Helmet>
        {url && <meta property="og:url" content={url} />}
        {type && <meta property="og:type" content={type} />}
        {title && <meta property="og:title" content={title} />}
        {desc && <meta property="og:description" content={desc} />}
        {image && <meta property="og:image" content={image} />}
      </Helmet>
    </div>
    );
  }
}

Wrap your rendered code in div tags as the Helmet code need to be imbedded into a div or HTML element

React.createElement: type is invalid when using multiple Helmet React Typescript

1 Answers1