Build/Test Tools: Fix React Refresh hot reloading for block plugins#10757
Build/Test Tools: Fix React Refresh hot reloading for block plugins#10757youknowriad wants to merge 1 commit intoWordPress:trunkfrom
Conversation
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
| [ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.js' ]: | ||
| '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js', | ||
| [ buildTarget + 'wp-includes/js/dist/development/react-refresh-entry.min.js' ]: | ||
| '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js', |
There was a problem hiding this comment.
TBH, this react refresh entry has nothing to do with Webpack. It works without that over-complication done by this plugin, increasing the bundle size needlessly.
We could explore replacing it directly with react-refresh which it depends upon anyway, just like in WordPress/gutenberg#74618
There was a problem hiding this comment.
@manzoorwanijk Please consider exploring that if you think it's important. The main goal is here is not to change behavior but to restore a working state. Do you think that solution would be something easy to implement without wp-scripts change.
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
In my testing, it works fine even when I activate the nightly version of the Gutenberg plugin.
youknowriad
force-pushed
the
fix/react-refresh-hot-reload
branch
from
fd7c81b to
c56c797
Compare
The `react-refresh-entry.js` script was bundling its own copy of `react-refresh/runtime` instead of using the `window.ReactRefreshRuntime` global set up by `react-refresh-runtime.js`. This created two separate runtime instances: the entry script set up hooks on its bundled copy, while plugins called `performReactRefresh()` on the window global — a different instance with no hooks registered. This splits the development webpack config into two configs so that `externals` only applies to the entry script. The runtime config bundles `react-refresh/runtime` and exposes it as `window.ReactRefreshRuntime`, while the entry config uses that global as an external. Follow-up to [61488]. Props youknowriad. See #64393.
youknowriad
force-pushed
the
fix/react-refresh-hot-reload
branch
from
c56c797 to
97daf5b
Compare
|
This was committed |
3 participants
Trac Ticket
https://core.trac.wordpress.org/ticket/64393
Summary
@wordpress/scriptswith the--hotflagreact-refresh-entry.jswas bundling its own copy ofreact-refresh/runtimeinstead of usingwindow.ReactRefreshRuntime, creating two separate runtime instancesTest plan
cd src/wp-content/plugins && npx @wordpress/create-block test-blockcd src/wp-content/plugins/test-block && npm run start -- --hotsrc/edit.js- changes should appear automatically without page refresh🤖 Generated with Claude Code