rescript-lang/rescript-react

Implementation ErrorBoundary component with jsx ppx

mununki opened this issue · 4 comments

ErrorBoundary is implemented by using jsx ppx now, but it has a warning in runtime.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at RescriptReactErrorBoundary

It is caused by the generated js representation is not fit to React API.

// with jsx ppx @react.component
function RescriptReactErrorBoundary(Props) {
  return getErrorBoundary(React.Component);
}

var make = RescriptReactErrorBoundary;

But, it should be

// without @react.component
var make = getErrorBoundary(React.Component);

It is worth trying with external binding with a component written in js.

@react.component @module("./react/ErrorBoundary.jsx")
external make: (~children: ...) => React.element = "default"

By the way, ErrorBoundary component is not an official React API. It is worth considering moving it to user space.

One solution #53

Fixed #53