Reason-React wrap reason for JS


#1

Hi everyone :wave:

I’m trying Reason for the first time (while having little expreience with OCaml and more with Elm and Haskell) on a React project byt I’ve hit an issue that is puzzling me for hours and I have no idea how to solve it. It would be great if anyone could help.

It’s related to ReasonReact.wrapReasonForJs

this is my code:

/* Init store

   assignes reducer and initial state to the store
   */
let appStore =
  Reductive.Store.create(~reducer=appReducer, ~preloadedState=init, ());

/* Configure Store

   This takes care of setting appropriete types to the Context
   That is correct message and state handlers
   */
module AppStore = {
  include ReductiveContext.Make({
    type action = appAction;
    type state = appState;
  });
};

/* Component template declaration.
   Needs to be **after** state and action declarations! */
let component = ReasonReact.statelessComponent("Example");

[@bs.deriving abstract]
type jsProps = {greeting: string};

/* `make` is the function that mandatorily takes `children` (if you want to use
   `JSX). `message` is a named argument, which simulates ReactJS props. Usage:

   `<Component1 message="hello" />`

   Which desugars to

   `React.createElement(
     Component1.make,
     Component1.makeProps(~message="hello", ())
   )` */
[@react.component]
let make = (~greeting, _children) =>
  <AppStore.Provider store=appStore>
    <RootComponent />
  </AppStore.Provider>

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(~greeting=jsProps->greetingGet, [||])
  );

This is an error I get:

We've found a bug for you!
  /home/marek/Projects/my-react-app/src/Index.re 97:27-28
  
  95 │ let default =
  96 │   ReasonReact.wrapReasonForJs(~component, jsProps =>
  97 │     make(~greeting=jsProps->greetingGet, [||])
  98 │   );
  
  The function applied to this argument has type 'a => React.element
This argument cannot be applied with label ~greeting
 
  • I’m not using classes for components - I’m using functional components with hooks
  • I don’t really need any props now but I might need some later
  • I’m using reductive
  • I need to wrap all my reason components by single JS component so react dom render should be called from js, Reason should only provide a component.

#2

Few more hours in I belive it’s related to Record API (deprecated). I just found this section of documentation which I belive should point me to the right direction. https://reasonml.github.io/reason-react/docs/en/components#export-to-js