Element: add polyfills for render, hydrate, unmountComponentAtNode#78899
Merged
Conversation
jsnajdr
requested review from
aduth,
peterwilsoncc,
simison,
tyxla and
youknowriad
jsnajdr
added
[Type] Bug
6 tasks
|
Size Change: +952 B (+0.01%) Total Size: 8.21 MB 📦 View Changed
ℹ️ View Unchanged
|
simison
reviewed
Jun 3, 2026
|
|
||
| ### hydrate | ||
|
|
||
| > **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead. |
Member
There was a problem hiding this comment.
Suggested change
| > **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead. | |
| > [!CAUTION] | |
| > **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead. |
Worth adding these notices as more visible alerts here?
vs
Member
Author
There was a problem hiding this comment.
This part of the README is generated from jsdoc comments, so we can't just add [!CAUTION] at will. Let's check if there is some way to add it to the source jsdoc comment.
Member
There was a problem hiding this comment.
Gotcha! Totally not a blocker either.
Member
There was a problem hiding this comment.
These package READMEs are also shown on developer.wordpress.org (example) which doesn't support that syntax. At one point I tracked that back to being a feature provided through Jetpack that needs to be enhanced first (Automattic/jetpack#45907).
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
aduth
approved these changes
Jun 3, 2026
Member
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
I was able to validate this on a screen that uses @wordpress/boot, i.e. Appearance > Fonts. Both wp.element.render and ReactDOM.render work, and the former logs a warning.
Strangely, when trying to test this in the post editor, it looks like React 18 is still being used there? (i.e. probably using the version of React that ships with WordPress stable). It still "works" there, but it works because it's using React 18. wp.element.render works (and logs) as expected.
Member
There was a problem hiding this comment.
A few general nitpicks about this file:
- I'd expect the name of the test file to follow from the file it's testing (i.e.
react-polyfillrather thanrender-polyfill) - I'd expect
describeto just be the name of the function under test (e.g.'render'instead of'render polyfill') (conventional, but apparently we don't document it) - I'm not sure I understand the reason for aliasing
renderasrenderPolyfill, particularly since we don't do it for the other polyfill members we're testing
Member
Author
There was a problem hiding this comment.
I've been renaming and reshuffling the files several times, so these naming issues creeped in.
I pushed an update where the file is renamed to react-polyfill.js and merged with find-dom-node.js, unit tests for the existing polyfill. Now there is a 1:1 match between source files and test files.
I'm not sure I understand the reason for aliasing render as renderPolyfill,
I still need to alias findDOMNode as findDOMNodePolyfill because otherwise I get lint errors about using legacy APIs. But this doesn't apply to render, so I removed the alias.
Member
Author
There was a problem hiding this comment.
merged with
find-dom-node.js
I had to revert this merge because findDOMNode tests use the Testing Library and the act() environment, while the render tests don't. Having both inside the same suite leads to mysterious errors.
Member
|
Tested a few popular plugins with WP 7.0.
React 19 without Polyfill:
React 19 with polyfill, a few continue to be broken:
Everything resumed to work when disabling Gutenberg, i.e. when on React 18. Additionally tested also Ninja Forms, Google Site Kit, Wordfence, WP Mail SMTP, Gravityforms, WPForms Lite, Hostinger Tools, Monsterinsights, Fluent Forms, and Rank Math. My testing isn't super precise/isolated as I have multiple plugins enabled at the same time, but curious if others can replicate. I don't think these are blockers to merging (things are better). Error details→ React 19 stopped applying → Sure Forms seems to be referencing React internals via this code in var n = r(51609)
, o = Symbol.for("react.element")
, i = Symbol.for("react.fragment")
, a = Object.prototype.hasOwnProperty
, s = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
, l = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}; |
Member
Author
This is indeed strange, the only explanation is that Gutenberg plugin is not active. Can you check the URLs of the |
Member
I'll check again, but I was simultaneously seeing |
Member
This must have been a temporary issue. It seems to be working now. Separately, one thing I'm observing in doing some edge-case testing switching between |
jsnajdr
force-pushed
the
add/react-render-polyfill
branch
from
8cfd9e1 to
06092f4
Compare
Member
Author
This is much worse than missing
This could be used to determine which component is currently rendering, but with React 19 it's completely gone. The internals are now called |
|
Flaky tests detected in 06092f4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26897624655
|
jsnajdr
added
the
Backport to Gutenberg Minor Release
Member
Author
Yes, this is an unpleasant edge case, there are two copies of the polyfill, not compatible with each other because of separate root maps. The reason is that import { render } from 'react-dom';It exists only on the I don't know how to share the implementation between the two scripts, so I decided to duplicate. In practice hopefully this never happens. The consumer should use only one |
Member
One idea (which I think maybe React itself has used?) might be to assign a custom property on the DOM element itself to track its root? But yeah, ideally this wouldn't happen in practice 😅 |
2 tasks
arthur791004
removed
the
Backport to Gutenberg Minor Release
Member
Author
Either this, or to put the root map on the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #78827. Adds polyfills for
render,hydrateandunmountComponentAtNodeto@wordpress/elementand also to thereact-domscript itself.For the polyfill to be really effective, it needs to be also in
react-dom, because that's where plugins like Elementor commonly import it from.react-domships a version of the polyfill without thedeprecatedwarnings, because we don't want thereact-domscript to depend onwp-deprecated. This is an issue that we should solve somehow: currently the polyfills inreact-domwon't issue any warning at all! But it must be done withoutwp-deprecated.The polyfills are implemented inside
@wordpress/element, and exported as a new special-purpose/react-polyfillexport.