Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Bug: HydrateRoot not throwing Error on invalid Args. #30876

Closed
Biki-das opened this issue Sep 4, 2024 · 2 comments · May be fixed by #30877
Closed

Bug: HydrateRoot not throwing Error on invalid Args. #30876

Biki-das opened this issue Sep 4, 2024 · 2 comments · May be fixed by #30877
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@Biki-das
Copy link
Contributor

Biki-das commented Sep 4, 2024

while working with the hydrateRoot call i forgot to pass the React Element () that shall be passed for it to work,

like below

const root = hydrateRoot(container, /* this takes a  react element /* {
  onRecoverableError: (error, errorInfo) => {
    if (error.message !== "Expected error") {
      logError(error, errorInfo.componentStack);
    }
  },
});

root.render();

React version:

Steps To Reproduce

Check this codesanbox URL

Link to code example:

The current behavior

we get to see this error

Screenshot 2024-09-04 at 8 04 08 PM

The expected behavior

if i try to uncomment the root.render() call, we see that the actual error is now being shown

Screen.Recording.2024-09-04.at.7.40.42.PM.mov

thought the error message needs to be aligned in the context of the validation error from the createRoot

https://react.dev/reference/react-dom/client/hydrateRoot#hydrateroot

the options according to the doc shall take an Object for the corresponding React root

the actual error message shall be this way

 'Warning: You passed an options object as the second argument to `hydrateRoot(...)`, did you forget to pass a React element?',

or if someone passes a JSX element to options

 'You passed a JSX element as an options to hydrateRoot. You probably meant to ' +
          'call root.render instead. ' +
          'Example usage:\n\n' +
          '  let root = hydrateRoot(domContainer, <App />, {...options});\n' +
          '  root.render(<App />);',
@Biki-das Biki-das added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Sep 4, 2024
@Biki-das Biki-das mentioned this issue Sep 4, 2024
Open
@Biki-das Biki-das changed the title Bug: HydrateHoot not throwing Error on invalid Args. Sep 4, 2024
@nkalpakis21
Copy link

@Biki-das built an app to get paid for this PR
https://www.n0va-io.com/discover/facebook/react
@rickhanlonii
Copy link
Member

Dupe of: #28792

We're going more in the direction of not adding runtime checks for these issues, since the typesystem can catch this without adding additional runtime/bundle cost in DEV.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
3 participants
@rickhanlonii @nkalpakis21 @Biki-das