How to solve in ReasonReact - "This has type: (ReasonReact.reactElement, string) => unit But somewhere wanted: at 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.

That looks like something is swallowing part of the compiler error message. Can you run the compile with the plain `bsb` command and post the output? — Yawar, Mar 16 '18 at 02:23
I've also re-install bsb to latest, rm -rf'd node_modules and package-lock.json. In addition, to updating to latest version of reason. Still receiving the same error. — Charlie-Greenman, Mar 16 '18 at 02:31

score 2 · Accepted Answer · answered Mar 16 '18 at 02:49

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.

I am trying to create an enterprise level reason react app, and from I understand reason react scripts is better in that regard. — Charlie-Greenman, Mar 16 '18 at 16:52
@Master-Chief OK, no worries. I'll ask in the Discord about strategies for taking the bsb template to enterprise level; I know people have definitely done it in their own projects. — Yawar, Mar 17 '18 at 23:17

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

1 Answers1