Rescript-compiler: new [@react.component] vs .rei

[diligiant]

While updating components to 5.0.4 (used master ##bb21ecb) and v3 syntax. I hit the following error :

The implementation src/Helmet.mlast
       does not match the interface src/helmet-WaykeHelmet.cmi:
       Values do not match:
         [@bs...] external makeProps:
           (~title: 'title=?, ~defaultTitle: 'defaultTitle=?, ~meta: 'meta=?,
           ~htmlAttributes: 'htmlAttributes=?, ~children: 'children,
           ~key: string=?, unit) =>
           {. "children": 'children, "defaultTitle": option('defaultTitle),
             "htmlAttributes": option('htmlAttributes),
             "meta": option('meta), "title": option('title)}
           = ""
       is not included in
         [@bs...] external makeProps:
           (~title: string=?, ~defaultTitle: string=?,
           ~meta: array(metaField)=?,
           ~htmlAttributes: array(htmlAttribute)=?, ~children: React.element,
           ~key: string=?, unit) =>
           {. "children": React.element, "defaultTitle": option(string),
             "htmlAttributes": option(array(htmlAttribute)),
             "meta": option(array(metaField)), "title": option(string)}
           = ""
       File "/.../src/Helmet.re", line 33, characters 2-17: Actual declaration

@rickyvetter made me check that it's not a ppx issue. files are below.

.re
[@react.component] let make = (~title=?, ~defaultTitle=?, ~meta=?, ~htmlAttributes=?, ~children) => {…}
.rei
[@react.component] let make: (~title: string=?, ~defaultTitle: string=?, ~meta: array(metaField)=?, ~htmlAttributes: array(htmlAttribute)=?, ~children: React.element) => React.element;

[bobzhang]

do you have a small example, this seems to be a ppx issue. can you try add type annotations to make see if it is indeed the type

[diligiant]

@bobzhang is the following more useful?
H.re

type metaField =
  | MetaName(string, string)
  | MetaProperty(string, string);

type htmlAttribute =
  | Lang(string)
  | Amp
  | Other(string, string);

[@react.component]
let make = (~title: string=?,
    ~defaultTitle: string=?,
    ~meta: array(metaField)=?,
    ~htmlAttributes: array(htmlAttribute)=?,
    ~children: React.element): React.element => {
      <div />
};

H.rei

type metaField =
  | MetaName(string, string)
  | MetaProperty(string, string);

type htmlAttribute =
  | Lang(string)
  | Amp
  | Other(string, string);

[@react.component]
let make:
  (
    ~title: string=?,
    ~defaultTitle: string=?,
    ~meta: array(metaField)=?,
    ~htmlAttributes: array(htmlAttribute)=?,
    ~children: React.element
  ) =>
  React.element;

-make-world =>

 The implementation src/H.mlast
       does not match the interface src/h-WaykeHelmet.cmi:
       Values do not match:
         [@bs...] external makeProps:
           (~title: string=?, ~defaultTitle: string=?,
           ~meta: array(metaField)=?,
           ~htmlAttributes: array(htmlAttribute)=?, ~children: React.element,
           ~key: string=?, unit) =>
           {. "children": React.element, "defaultTitle": string,
             "htmlAttributes": array(htmlAttribute),
             "meta": array(metaField), "title": string}
           = ""
       is not included in
         [@bs...] external makeProps:
           (~title: string=?, ~defaultTitle: string=?,
           ~meta: array(metaField)=?,
           ~htmlAttributes: array(htmlAttribute)=?, ~children: React.element,
           ~key: string=?, unit) =>
           {. "children": React.element, "defaultTitle": option(string),
             "htmlAttributes": option(array(htmlAttribute)),
             "meta": option(array(metaField)), "title": option(string)}
           = ""
       File "/.../src/H.re", line 10, characters 2-17: Actual declaration

[rickyvetter]

Looking at this.

[rickyvetter]

Hey @diligiant it looks like everything works! These types aren't correct.

  [@react.component]
  let make =
      (
        ~title: option(string)=?,
        ~defaultTitle: option(string)=?,
        ~meta: option(array(metaField))=?,
        ~htmlAttributes: option(array(htmlAttribute))=?,
        ~children: React.element,
      )
      : React.element => {
    <div />;

[diligiant]

@rickyvetter you are right, I made a mistake (my classic mistake) when I added the types per bob's request. BUT if I remove them (in the .re), the error comes back

Is this normal ?
```
The implementation src/H.mlast
does not match the interface src/h-WaykeHelmet.cmi:
Values do not match:
[@bs...] external makeProps:
(~title: 'title=?, ~defaultTitle: 'defaultTitle=?, ~meta: 'meta=?,
~htmlAttributes: 'htmlAttributes=?, ~children: React.element,
~key: string=?, unit) =>
{. "children": React.element,
"defaultTitle": option('defaultTitle),
"htmlAttributes": option('htmlAttributes),
"meta": option('meta), "title": option('title)}
= ""
is not included in
[@bs...] external makeProps:
(~title: string=?, ~defaultTitle: string=?,
~meta: array(metaField)=?,
~htmlAttributes: array(htmlAttribute)=?, ~children: React.element,
~key: string=?, unit) =>
{. "children": React.element, "defaultTitle": option(string),
"htmlAttributes": option(array(htmlAttribute)),
"meta": option(array(metaField)), "title": option(string)}
= ""
File "/.../src/H.re", line 10, characters 2-17: Actual declaration
````

[rickyvetter]

I've created a slightly simpler case for this - in an re file you can add the following:

module Foo: {
  [@react.component]
  let make:
      (
        ~htmlAttributes: array(float)=?,
      )
      => React.element;
} = {
[@react.component]
let make =
    (
      ~htmlAttributes as _=?,
    )
    : React.element =>
  <div />;
};

Specific ingredients needed: optional argument with a complex type - array(foo) will break but foo won't.

 Values do not match:
    [@bs...] external makeProps:
      (~htmlAttributes: 'htmlAttributes=?, ~key: string=?, unit) =>
      {. "htmlAttributes": option('htmlAttributes)} = ""
  is not included in
    [@bs...] external makeProps:
      (~htmlAttributes: array(float)=?, ~key: string=?, unit) =>
      {. "htmlAttributes": option(array(float))} = ""

In this scenario you can see that the types do indeed match - which leads me to believe it has something to do with the hidden optional types. Investigating further. Sorry for the slow turnaround here!

[diligiant]

@rickyvetter don’t worry ; all that matters if that you find so that others don’t face this.

[diligiant]

@rickyvetter are you sure it's fixed?
I wanted to be really sure (after a simple git pull and rebuild) -> git clone buckescript, node scripts/buildocaml.js & install.js

yarn bsb -clean-world, -make-world
yarn run v1.15.2
$ /.../js-mono/node_modules/.bin/bsb -make-world

[.bin/bsb -> new repository - one can never be too careful]

Your simpler case still errs as well as mine (I checked that the changes you committed where there as well.)

[rickyvetter]

module Foo :
  sig
    external makeProps : ?bar:string array -> unit -> string = ""[@@bs.obj ]
  end =
  struct external makeProps : ?bar:'bar -> unit -> string = ""[@@bs.obj ] end 

@bobzhang I think this is actually an issue with bs.obj. I'm not sure why it took so long to figure out.

[bobzhang]

looking into it, thanks for the small example

[yawaramin]

Aliasing the string array type works:

module Foo : sig
  type t
  type bar = string array
  external makeProps : ?bar:bar -> unit -> t = "" [@@bs.obj]
end = struct
  type t
  type bar = string array
  external makeProps : ?bar:'bar -> unit -> t = "" [@@bs.obj]
end

[bobzhang]

hi all, it should be fixed on master, let me know if it works, sorry for the delay

[diligiant]

@bobzhang I checked previous examples and it's fixed here. Thank you. I was able to uncomment other .rei (ones with default values for ex), so thank you again.

[bobzhang]

This looks weird, when I fix the bug, I added a regression test: https://github.com/BuckleScript/bucklescript/blob/master/jscomp/test/gpr_3519_test.ml
it works for 4.06.1

[bobzhang]

@rickyvetter could this be a bug in react-jsx 4.06?
you can see htmlAttributes has different type one is option, the other is array
this is different bug which I fixed last time (different marshalled string)

[bobzhang]

@diligiant if this is a new bug, would you mind open a new issue?

[diligiant]

@bobzhang thank you. I'll let @rickyvetter "answer" your previous hint and take it from here.