rescript-react icon indicating copy to clipboard operation
rescript-react copied to clipboard

Implementation ErrorBoundary component with jsx ppx

Open mununki opened this issue 3 years ago • 3 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);

mununki avatar Jul 24 '22 12:07 mununki

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"

mununki avatar Jul 24 '22 12:07 mununki

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

mununki avatar Jul 24 '22 12:07 mununki

One solution #53

mununki avatar Jul 24 '22 17:07 mununki

Fixed #53

mununki avatar Sep 01 '22 05:09 mununki