Skip to content

Fix ErrorBoundary component using external binding #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 1, 2022

Conversation

mununki
Copy link
Member

@mununki mununki commented Jul 24, 2022

I found the critical error during the thorough test for V10.

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

This warning is not caused by V10, however, the generated js representation needs to be fit to React API.
I tried to implement the ErrorBoundary component by using jsx ppx, but no gain so far. I think I should revert it and look later.

@mununki
Copy link
Member Author

mununki commented Jul 24, 2022

The generated js representation should be

var make = getErrorBoundary(React.Component);

But, by using jsx ppx

function RescriptReactErrorBoundary(Props) {
  return getErrorBoundary(React.Component);
}

var make = RescriptReactErrorBoundary;

@cristianoc
Copy link
Contributor

Would you create a reminder issue to revisit this later?

@mununki mununki force-pushed the fix-error-boundary branch from f63c2a8 to 6a81df7 Compare July 24, 2022 17:26
@mununki mununki changed the title Revert using jsx ppx for ErrorBoundary component Fix ErrorBoundary component using external binding Jul 24, 2022
@mununki mununki force-pushed the fix-error-boundary branch from 6a81df7 to fec6d0d Compare July 24, 2022 17:34
@mununki
Copy link
Member Author

mununki commented Jul 24, 2022

I found one solution to make the ErrorBoundary component works by using jsx ppx.
By using the jsx ppx in normal way, the generated js output is inevitable.

function RescriptReactErrorBoundary(Props) {
  return getErrorBoundary(React.Component);
}

var make = RescriptReactErrorBoundary;

But, there is another way to use the jsx ppx, external

@react.component @module("./react/ErrorBoundary.js")
external make: (
  ~children: React.element,
  ~fallback: params<'error> => React.element,
) => React.element = "default"

// generated
var ErrorBoundaryJs = require("./react/ErrorBoundary.js").default;

var make = ErrorBoundaryJs;

And It works just fine.

@mununki
Copy link
Member Author

mununki commented Sep 1, 2022

I fixed the runtime error of ErrorBoundary. It enables us to use @react.component without needing external binding to the ErrorBoundary component in javascript.

@cristianoc
Copy link
Contributor

Need someone to double-check, or are you confident that it's right and can be merged?

@mununki
Copy link
Member Author

mununki commented Sep 1, 2022

Need someone to double-check, or are you confident that it's right and can be merged?

I'm confident that it fixes the runtime error caused by #47

@cristianoc cristianoc merged commit 46944b4 into master Sep 1, 2022
@cristianoc cristianoc deleted the fix-error-boundary branch September 1, 2022 05:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants