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.

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

Replace element.ref with element.props.ref #207

Merged
merged 4 commits into from
Dec 13, 2024

Conversation

tjosepo
Copy link
Member

@tjosepo tjosepo commented Dec 12, 2024

Fixes: #206

Summary

React 19 throws this error when using some Orbiter components:

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

This is caused by doing:

// ⚠️ Invalid as of React 19
const ref = element.ref;

It should now be:

// ⚠️ Valid with React 19, not React 18
const ref = element.props.ref;

To make it backwards compatible, we can do:

// ✅ Valid with both React 19 & React 18
const ref = element.props.ref ?? (element as any).ref;

Copy link

netlify bot commented Dec 12, 2024

Deploy Preview for wl-orbiter-storybook ready!

Name Link
🔨 Latest commit e424e1e
🔍 Latest deploy log https://app.netlify.com/sites/wl-orbiter-storybook/deploys/675b372dbb832900084f1f9c
😎 Deploy Preview https://deploy-preview-207--wl-orbiter-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Dec 12, 2024

Deploy Preview for wl-orbiter-website ready!

Name Link
🔨 Latest commit e424e1e
🔍 Latest deploy log https://app.netlify.com/sites/wl-orbiter-website/deploys/675b372de183360007534a19
😎 Deploy Preview https://deploy-preview-207--wl-orbiter-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@alexasselin008
Copy link
Member

@tjosepo Thank you. you should probably create a changeset for this

@tjosepo
Copy link
Member Author

tjosepo commented Dec 12, 2024

I'll update the branch with a changeset.

I think there are more changes to do before being being ready for React 19, but this one seemed easy to fix quickly.

@tjosepo tjosepo force-pushed the fix/react-19-access-ref-from-props branch from 691abce to 98511b7 Compare December 12, 2024 18:55
@tjosepo tjosepo force-pushed the fix/react-19-access-ref-from-props branch from 29a8dc0 to e424e1e Compare December 12, 2024 19:19
@alexasselin008 alexasselin008 merged commit b5d1626 into master Dec 13, 2024
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 [React 19] Accessing element.ref was removed in React 19
2 participants