search

pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.38k stars 1.57k forks source link

hideTextInstance error when accidentally including text in the tree #321

Closed Mike-Dax closed 4 years ago

Mike-Dax commented 4 years ago

I made this typo:

image

Note the space before {props.children}.

That space is a HostText tag, the reconciler doesn't have the hideTextInstance defined so it throws. The error will say something like hideTextInstance is not a function.

Obviously I saw this error first and it was a bit of a time sink to diagnose the actual problem. There was a bit of indirection in my use case given I'm using a wrapping component that automatically adds a Suspense boundary as well as other features.

That Suspense component finishing the load triggers that hideTextInstance call.

It seems that text otherwise in the tree is just silently ignored.

Adding a noop for hideTextInstance and unhideTextInstance in the reconciler seems to work and be consistent with other behaviour of this reconciler, but I'm not familiar enough with the internals of either this project or the default react reconciler to know if that's the correct fix?

Obviously there shouldn't be text in the tree - should this just throw more explicitly with an error saying there shouldn't be text in the tree?

I'll open a PR that just throws for the next person that makes this mistake.

marcelpi commented 2 years ago

Thanks for pointing this out, just had the same problem and solved it using your feedback.

rekliner commented 2 years ago

This one got me for a while. Details in case it saves anyone else time: Visual Studio Code is happy to conveniently create comments as {/ comment /} within JSX. The reconciler will ignore these comments, carriage returns, or any form of whitespace AFTER the comment or even on the next line... But if it has a space as the next character after a closing > the "Text is not allowed in the R3F tree." error will be thrown. So its important to put any JSX comments on the next line after an opening tag or immediately following it with no whitespace.

supunTE commented 6 months ago

I faced the same for a while. But after @rekliner's comment, my focus went through the code comments. I have put comments for dividing sections like this /// [Comment] in the JSX between components. In Vscode, issues never appeared. But once after I removed all these comments the warning was gone.

CodyJasonBennett commented 6 months ago

I've been looking into adding tracing back to JSX for errors like this, but it relies on automatic JSX transform.