Empty text node crashes

[KevinBatdorf]

Raycast version: 1.35.2

Description

Error: Reconciler: Text instances not supported

Returning an empty text node crashes the app. I realize this may be an antipattern though.

Steps To Reproduce

Add this command:

import { List } from "@raycast/api";
export default () => <List>{"" && <List.Item title="My list item" />}</List>;

(Adding some context below in case people come here from Google)

A typical use case would be some data like a website URL coming from an API that you check against, and the data may be an empty string:

export default () => (<List>
  {response?.website && <List.Item title="response.website" />}
</List>);

A better way, of course, is:

export default () => (<List>
  {response?.website ? <List.Item title="response.website" /> : null}
</List>);

The current behavior

It crashes

The expected behavior

Fail gracefully (at least in production mode?)

[mathieudutour]

I’m not sure what gracefully would mean in this case, the reconciler doesn’t support text nodes and there are no plan to support them. We could potentially filter out empty strings on every component but that would impact the performances.

you are indeed right that it is an anti-pattern to use x && y in jsx because you will end up with empty strings and 0s in your output.

[KevinBatdorf]

Gracefully would mean instead of crashing the app, it wouldn't render the text node but instead continue to render the other* child nodes. The code I shared here that crashes in Raycast would render properly in React. That's why I opened the issue.

It's an anti pattern but not uncommon with string and boolean values. Arrays behave differently as you pointed out.

I'm not privy to the implementation details so I can't assist with performance issues.

[mathieudutour]

The code I shared here that crashes in Raycast would render properly in React

It would render properly in react-dom because it supports text nodes. It wouldn't in react-native AFAIK because strings needs to be wrapped in a Text Component.

[KevinBatdorf]

Ah, Im not very familiar with React Native. Well anyway, this was also opened to give a solution to anyone else that hits the same error and isn't sure what's going on. It will likely show up on Google in that case. Feel free to close it.

Thanks for looking into it though and the extra context.

[mattisssa]

Should be fixed in the v1.37.0