Search code examples
reactjscontenteditablereason

Can't create ReasonML bindings for react-contenteditable

I'm trying to create a small binding for react-contenteditable (https://www.npmjs.com/package/react-contenteditable) but running into runtime errors.

Here's the binding:

[@bs.deriving abstract]
type eventTarget = {
  value: string,
};

[@bs.deriving abstract]
type changeEvent = {
  target: eventTarget,
};

[@bs.module "react-contenteditable"] [@react.component]
external make:
  (
    ~html: string,
    ~disabled: bool,
    ~onChange: changeEvent => unit=?,
  ) =>
  React.element =
  "ContentEditable";

And usage:

<ContentEditable
  html="text"
  disabled=false
  onChange={_ => ()}
 />

Specific problem:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Solution

  • The final line should be React.element = "default"; as the component is the direct export of the library, not a member of it.