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

Returning an empty fragment throws a confusing error #12964

Closed
aweary opened this issue Jun 1, 2018 · 5 comments · Fixed by #12966
Closed

Returning an empty fragment throws a confusing error #12964

aweary opened this issue Jun 1, 2018 · 5 comments · Fixed by #12966
Labels
Type: Bug

Comments

@aweary
Copy link
Contributor

aweary commented Jun 1, 2018 •
edited
Loading

https://codesandbox.io/s/40j50607y0

Rendering a component like:

const Foo = () => <React.Fragment />

Throws the error:

Foo(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The error is confusing because clearly Foo is returning a value. I don't know if we want to support rendering empty fragments, but in any case this error is confusing.

If this isn't allowed it should explicitly call out that a component cannot return a fragment with no children.

cc @gaearon
@aweary
Copy link
Contributor Author

aweary commented Jun 1, 2018

This also doesn't throw when using renderToString: https://codesandbox.io/s/7113m08k0

@gaearon
Copy link
Collaborator

gaearon commented Jun 1, 2018

I think that's just a bug.

@aweary
Copy link
Contributor Author

aweary commented Jun 1, 2018 •
edited
Loading

So rendering empty fragments should work?

philipp-spiess added a commit to philipp-spiess/react that referenced this issue Jun 2, 2018
@philipp-spiess
Don’t error when returning an empty Fragment
4ac335b 
Fixes facebook#12964

When a fragment is reconciled, we directly move onto it’s children.
Since an empty `<React.Fragment/>` will have children of `undefined`,
this would always throw.

To fix this, we bail out in those cases. This case now behaves like
returning `null` directly.
@philipp-spiess philipp-spiess mentioned this issue Jun 2, 2018
Merged
philipp-spiess added a commit to philipp-spiess/react that referenced this issue Jun 2, 2018
@philipp-spiess
Don’t error when returning an empty Fragment
4e78ff9 
Fixes facebook#12964

When a fragment is reconciled, we directly move onto it’s children.
Since an empty `<React.Fragment/>` will have children of `undefined`,
this would always throw.

To fix this, we bail out in those cases. This case now behaves like
returning `null` directly.
@gaearon
Copy link
Collaborator

gaearon commented Jun 13, 2018

Fixed in React 16.4.1.

@nmain nmain mentioned this issue Jul 24, 2018
Closed
@gaearon
Copy link
Collaborator

gaearon commented Aug 3, 2018

For posterity, #12964 (comment) was caused by { rather than ( in the function definition (so the invariant was correct).

@khardenstine khardenstine mentioned this issue Oct 10, 2018
Closed
@akintolga akintolga mentioned this issue Jan 10, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Don’t error when returning an empty Fragment philipp-spiess/react
2 participants
@gaearon @aweary