React component crashes; currying problem?

1

If I instantiate a component using {Component.makeProps(...)->Component.make} it crashes. But if I instantiate it using <Component...></Component> it works. Is there some reason why it should behave differently in these two cases? When I look at the javscript and stack trace it looks like it might have to do with currying but I’m not sure. The one that works has the line React.createElement... but the one that crashes uses Curry._1(FluentUI.Coachmark.make,... I originally wrote a wrapper function for this in TypeScript and am pretty sure it worked with the {Component.makeProps...} syntax; now I’m trying to use it without a wrapper function and @genType.import the component directly.

This is the one that crashes in curry.js with the error TypeError: f.apply is not a function.

{
  Coachmark.makeProps(
    ~target,
    ~delayBeforeCoachmarkAnimation=3000,
    ~children=TeachingBubbleContent.makeProps(
      ~headline="What do you want to learn?",
      ~target,
      (),
    )
    ->TeachingBubbleContent.make
    ->ReactNode.fromElement,
    (),
  )->Coachmark.make
}

This is the one that works.

<Coachmark target={target} delayBeforeCoachmarkAnimation=3000>
  {TeachingBubbleContent.makeProps(
    ~headline="What do you want to learn?",
    ~target,
    (),
  )
  ->TeachingBubbleContent.make
  ->ReactNode.fromElement}
</Coachmark>

Here are the different javascripts that are produced…

WORKS
    tmp = React.createElement(FluentUI.Coachmark.make, {
      target: target,
      children: Curry._1(FluentUI.TeachingBubbleContent.make, {
        headline: "What do you want to learn?",
        target: target,
      }),
      delayBeforeCoachmarkAnimation: 3000,
    });
  }

CRASHES
    tmp = Curry._1(FluentUI.Coachmark.make, { // CRASHES HERE
      target: target,
      children: Curry._1(FluentUI.TeachingBubbleContent.make, {
        headline: "What do you want to learn?",
        target: target,
      }),
      delayBeforeCoachmarkAnimation: 3000,
    });
  }

Here is the top-level component definition…

module Coachmark = {
  @genType.import("@fluentui/react") @react.component
  external make: (
    ~target: Target.t,
    ~children: ReactNode.t=?,
    ~delayBeforeCoachmarkAnimation: int=?,
    unit,
  ) => React.element = "Coachmark"
}
2

Besides currying, one obvious difference is that you don’t use createElement in the crashing example, but you should. So maybe the problem lies there.

3

Thank you thank you thank you. I switched it to…

Coachmark.makeProps(...)->React.createElement(Coachmark.make,_)

…and that works. I wonder when it is ever safe to do what I did and simply call Coachmark.make(props)? This generates a React.element too so it is a bit confusing the difference between the two options. Calling Component.make on its own is a footgun; I can’t be the only person running into this problem.