How to solve in ReasonReact - "This has type: (ReasonReact.reactElement, string) => unit But somewhere wanted: at <anonymous>actElement

Question

I have a very compact ReasonReact reducer component, which has a component, initialState, reducer, action, and render function as follows:

type actions =
  | DoNothing;

let component = ReasonReact.reducerComponent("ShowHide");

let make = (~name, _children) => {
  ...component,
  initialState: () => 0, /* here, state is an `int` */
  reducer: (action, state) =>
    switch action {
      | DoNothing => ReasonReact.NoUpdate;
    },
  render: (self) => {
    let greeting =
      "Hello: " ++ name ++ ". You've clicked the button " ++ string_of_int(self.state) ++ " time(s)!";
    <div></div>
  }
};

I am trying to render in my app.re file using the ReactDOMRe.renderToElementWithId function:

<div id = "RenderShowHide"></div>
        ReactDOMRe.renderToElementWithId(<ShowHide name="hello" />, "RenderShowHide")

However, the Reason/Bucklescript compiler is complaining as follows:

This has type:
    (ReasonReact.reactElement, string) => unit
  But somewhere wanted:
    at <anonymous>actElement

However, I am having a difficulty what an actElement is. Any suggestions as to what an actElement is, and how I can go around fixing the above, would be more than appreciated. Thank you.

Answer 1

I tried the repo you posted: https://github.com/CharlieGreenman/reason-react-razroo

npm install
bsb -make-world

I got the following error message:

  We've found a bug for you!
  /Users/yawar/src/reason-react-razroo/src/app.re 16:9-40

  14 ┆ </div>
  15 ┆ <p className="App-intro">
  16 ┆   ReactDOMRe.renderToElementWithId(<ShowHide name="hello"/>, "index")
  17 ┆   (ReasonReact.stringToElement("To get started, edit"))
  18 ┆   <code> (ReasonReact.stringToElement(" src/app.re ")) </code>

  This has type:
    (ReasonReact.reactElement, string) => unit
  But somewhere wanted:
    ReasonReact.reactElement

It looks like something in your build tooling was swallowing part of your error message. The main problem is on l. 16; if you get rid of that line the error will go away. If you want to render the ShowHide component, then change the line to just the literal JSX, not the call to ReactDOMRe.renderToElementWithId.

I have two more general recommendations; try to stick with the bsb-provided React skeleton project unless you are expert-level, because it's way simpler and much better supported:

bsb -init my-project -theme react

And, try to post the entire error message for future errors, starting from the 'We've found a bug for you!' line. That will help diagnose a lot.