这是indexloc提供的服务,不要输入任何密码
Skip to content

feat: add MessageChannel polyfill to support react 19 #238

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 10 commits into from
Dec 21, 2024

Conversation

mustafasegf
Copy link
Contributor

@mustafasegf mustafasegf commented Dec 19, 2024

add MessageChannel polyfill to support react 19
Related to #218

marcalexiei

This comment was marked as resolved.

@Valerioageno Valerioageno added the enhancement New feature or request label Dec 19, 2024
@marcalexiei

This comment was marked as resolved.

@mustafasegf

This comment was marked as resolved.

@Valerioageno
Copy link
Member

I got this console error when trying your changes on tuono-tutorial. Do you have the same?

Screenshot 2024-12-20 203804

@Valerioageno
Copy link
Member

I checked tuono-app and tuono-tutorial by putting react and react-dom at v19.0.0

Copy link
Collaborator

@marcalexiei marcalexiei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just submitting my review. You should just revert the changes on the pnpm-lock file since no dependencies are changed.

I also performed some debug on the issue Valerio reported but I'm posting what I discovered in a separate comment.

Warning

Note for myself: after closing the issue open a task to address review comment posted below

@marcalexiei
Copy link
Collaborator

The error Valerio encountered is caused by changing react@19 only on examples/tuono-app package.
However when printing the React version from examples/tuono-app/src/routes/__root.tsx the results is that the actual loaded react version is 18.3.1 not 19:

(The object logs are the children printed inside RootRoute component)

image

Why this happen?

It happens due to the fact that examples reference `tuono` folder within the repository which contains his own version of `React`. I added a screenshot inside this `details` to show this. Screenshot 2024-12-21 at 14 37 56

To use the right version of React the right command is:

pnpm --filter="./examples/*" --filter="./packages/*" up react@latest react-dom@latest @types/react@latest @types/react-dom@latest

This should ensure that same version of React is used across all involved packages.


Now it works right?

Unfortunately, no:
when running tuono dev from examples/tuono-app the result is a React minified error printed in the HTML page:

image
Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The links leads here

The error is the same we saw earlier:

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props}). If you meant to render a collection of children, use an array instead.

But now is printed directly in the HTML page.


What to do next?

I think this PR can be safely merged (after pnpm-lock.yaml changes are reverted).
It should not have impact on react@18, which doesn't use MessageChannel API,
hence this polypill won't be included in the bundle.

Then we can figure out the next steps to support react@19.

WDYT?

@Valerioageno
Copy link
Member

Sounds perfect! Thanks for it.

Copy link
Member

@Valerioageno Valerioageno left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for it!

@marcalexiei marcalexiei merged commit 498601c into tuono-labs:main Dec 21, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants