React children prop should be ReactNode not JSX.Element

1

I’m trying to use a React component that permits children. Using gentype this gets turned into the code below, which generates a type-check error. If I switch the generated .tsx to use a ReactNode for children rather than a JSX.Element it seems to work, but there is no ReactNode that I can find in the standard React to Rescript bindings. Am I doing something wrong here? I assume the standard Rescript React bindings and GenType should handle this fine. fluent ui on github

module MessageBar = {
  @genType.import("@fluentui/react") @react.component
  external make: (
    ~messageBarType: @int
    [
      | @genType.as(0) #info
      | @genType.as(1) #error
      | @genType.as(2) #blocked
      | @genType.as(3) #severeWarning
      | @genType.as(4) #success
      | @genType.as(5) #warning
    ]=?,
    ~children: React.element=?,
    unit,
  ) => React.element = "MessageBar"
}

export const MessageBarTypeChecked: React.ComponentType<{
  readonly messageBarType?: 0 | 1 | 2 | 3 | 4 | 5;
  readonly children?: JSX.Element;
}> = MessageBarNotChecked;

The error message in the tsx file…

Type ‘FunctionComponent’ is not assignable to type ‘ComponentType<{ readonly messageBarType?: 0 | 1 | 2 | 3 | 4 | 5 | undefined; readonly children?: Element | undefined; }>’.
Type ‘FunctionComponent’ is not assignable to type ‘FunctionComponent<{ readonly messageBarType?: 0 | 1 | 2 | 3 | 4 | 5 | undefined; readonly children?: Element | undefined; }>’.
Types of property ‘propTypes’ are incompatible.
Type ‘WeakValidationMap | undefined’ is not assignable to type ‘WeakValidationMap<{ readonly messageBarType?: 0 | 1 | 2 | 3 | 4 | 5 | undefined; readonly children?: Element | undefined; }> | undefined’.
Type ‘WeakValidationMap’ is not assignable to type ‘WeakValidationMap<{ readonly messageBarType?: 0 | 1 | 2 | 3 | 4 | 5 | undefined; readonly children?: Element | undefined; }>’.
Types of property ‘children’ are incompatible.
Type ‘Validator | undefined’ is not assignable to type ‘Validator<Element | null | undefined> | undefined’.
Type ‘Validator’ is not assignable to type ‘Validator<Element | null | undefined>’.
Type ‘ReactNode’ is not assignable to type ‘Element | null | undefined’.
Type ‘string’ is not assignable to type ‘Element | null | undefined’.

2

I worked around this by creating a wrapper React element and doing @gentype.import on this. So now when ReScript creates a JSX.Element as the children property, I cast/convert the children to a ReactNode before using it in the MessageBar component.

export const messageBar = {
  create: (p: {
    messageBarType?: MessageBarType;
    children: JSX.Element;
  }) => {
    let childrenNode: ReactNode = p.children;
    let props: IMessageBarProps = {
      isMultiline: p.isMultiline,
      children: childrenNode,
    };
    return <MessageBar {...props} />;
  },
};

I’m confused though. I created this simple method to receive a ReactNode, did a @gentype.import, and was able to call this by passing in a React.Element. As expected, a method that accepts a ReactNode can also take a JSX.Element.

export const receiveNode = (r: ReactNode) => {
  console.log("invoked!");
};

@genType.import("./fluentUI")
external receiveNode: React.element => unit = "receiveNode"

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

But for some reason I don’t understand, the children property on the MessageBar won’t work with a React.Element. This code here generates the typescript error type ReactNode is not assigable to type Element. If I change the generated Typescript to readonly children: React.ReactNode the compile error goes away.

module FluentMessageBar = {
  @genType.import("@fluentui/react") @react.component
  external make: (~children: React.element, unit) => React.element = "MessageBar"
}

// type check error
export const MessageBarTypeChecked: React.ComponentType<{ readonly children: JSX.Element }> = MessageBarNotChecked;
3

There is an open issue on GenType about this.