Getting the following error when creating React HOC: type is invalid — expected string or a class/function but got: object

Question

That's the first time I am using Flow in a work environment, I usually prefer TypeScript over Flow a lot.

I am having some issue creating a really simple HOC, which is something I did a lot of times with no issues. I am most probably missing something really obvious or something related with Flow that I am not aware of.

I googled a lot but it looks all the posts with the same issues are caused by default vs named exports/imports , which does not look my case (I suppose).

Here all the file where I define the HOC (suppose hoc-sample.js ):

// @flow

import React from 'react';

export default function hocSample(Component: any) {
  return class extends React.Component<any, any> {
    render() {
      return (
        <div>
          <div>TEST</div>
          <Component />
        </div>
      );
    }
  };
}

As you can see, I export as default a function which returns a component, whose render method simply renders the passed component, wrapped inside a div with another div before.

Here how I import it:

import hocSample from 'hoc-sample.js';

Here how I create the HOC inside the file:

const HOCSample = hocSample(<div>WRAPPED COMPONENT</div>);

And here how I use it inside the render method:

<HOCSample />

I get the following error:

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

Any idea what is the obvious thing that I am missing please?

I double checked in a lot of other projects that I have, and the same code seems to work completely fine.

Answer 1

I replicated this for you in a codesandbox repo link here https://codesandbox.io/s/x3qr9xqxpz

Your problem is here

 const HOCSample = hocSample(<div>WRAPPED COMPONENT</div>);

hocSample expects a React component not an HTML element, so,

const MyApp = () => <div>WRAPPED COMPONENT</div>;
const HOCSample = hocSample(MyApp);