How to make .resi files dumped from react files compiler friendly?

1

I used the rescript dump command to generate a .resi file with a bunch of React components:

type windowFrame = {width: int, height: int, matches: bool}
type mediaQueryList = {matches: bool}
type view = unit => React.element

module Desktop: {
  external makeProps: (
    ~children: view,
    ~flip: 'flip,
    ~key: string,
    unit,
  ) => {"children": view, "flip": option<'flip>} = "" "#rescript-external"
  let make: {"children": view, "flip": option<bool>} => React.element
}

But I am getting a kind of cryptic error when it tries to compile:

 The implementation [redacted].res
       does not match the interface src/rescript-src/components/Responsive/responsive-[redacted].cmi:
       ...
       In module Desktop:
       Values do not match:
         external makeProps: (~children: view, ~?flip: 'flip, ~?key: string, unit) => {
  "children": view,
  "flip": option<'flip>,
} =
  "" "#rescript-external"
       is not included in
         external makeProps: (~children: view, ~flip: 'flip, ~key: string, unit) => {
  "children": view,
  "flip": option<'flip>,
} =
  "" "#rescript-external"
       File "[redacted]/Responsive.resi", line 5, characters 3-215:
         Expected declaration
       File "Responsive", line 1, characters 0-0: Actual declaration

From looking at previous threads on this subject, it has something to do with the @react.component being a one-way transform. Any hints for how to manually tweak the .resi so the compiler is happy?

1 Like
2

did you find a solution? I have the same problem

3

Your reply here encouraged me to give it another shot and it finally clicked.

Turns out the trick is converting the .resi back into @react.component syntax.

This is the now compiling .resi file for the sample above:

type view = unit => React.element

module Desktop: {
  @react.component
  let make: (~children:view, ~flip:bool=?) => React.element
}

Also found some hints from Interface for react component - #7 by persianturtle

3 Likes