received error message when using component

Question

I am creating a website using ReasonReact, but I encounter this error message when using a normal component. Does anyone know what is happening?

module Component1 = {
  let component = ReasonReact.statelessComponent("Component1");
  let make = () => {...component, render: self => <div />};
};

module Component2 = {
  let component = ReasonReact.statelessComponent("Component1");
  let make = () => {
    ...component,
    render: self => <div> <Component1 /></div>, /*error on compenent1*/ 
  };

Here is the error message:

(
  React.component('props),
  'props
) => React.element
<root>/node_modules/reason-react/src/React.re

Error: This expression has type
         unit =>
         ReasonReact.componentSpec(ReasonReact.stateless,
                                    ReasonReact.stateless,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.actionless)
       but an expression was expected of type
         React.component(unit) = unit => React.element
       Type
         ReasonReact.componentSpec(ReasonReact.stateless,
                                    ReasonReact.stateless,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.noRetainedProps,
                                    ReasonReact.actionless)
       is not compatible with type React.element 

Answer 1

The problem seems to be that you're using a project configured to use JSX version 3 with components designed for JSX version 2.

JSX version 3 was introduced in ReasonReact 0.7.0, along with a new method for defining react components that supports hooks, but still supports the method you're using as long as you configure your project to use JSX version 2. If this is a new project, which it seems to be, I would recommend using the new component style, where your code would simply look like this:

module Component1 = {
  [@react.component]
  let make = () =>
    <div />;
};

module Component2 = {
  [@react.component]
  let make = () =>
    <div> <Component1 /> </div>;
};

Alternatively, you can continue using the old style of components and JSX version 2 by specifying the following in bsconfig.json:

{
  ...
  "reason": {"react-jsx": 2}
}

See the blog post on ReasonReact 0.7.0 for more details.