Replace @pmmmwh/react-refresh-webpack-plugin with react-refresh#74618
Closed
manzoorwanijk wants to merge 2 commits intotrunkfrom
Closed
Replace @pmmmwh/react-refresh-webpack-plugin with react-refresh#74618manzoorwanijk wants to merge 2 commits intotrunkfrom
manzoorwanijk wants to merge 2 commits intotrunkfrom
Conversation
manzoorwanijk
added
the
[Type] Code Quality
|
Size Change: -9.28 kB (-0.3%) Total Size: 3.05 MB
ℹ️ View Unchanged
|
manzoorwanijk
force-pushed
the
update/repalce-pmmmwh-react-refresh-webpack-plugin
branch
from
d7a6140 to
4334e3c
Compare
manzoorwanijk
requested review from
ajitbohra,
nerrad and
ntwb
as code owners
manzoorwanijk
requested review from
aduth
and removed request for
ajitbohra,
nerrad and
ntwb
|
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. |
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request removes the @pmmmwh/react-refresh-webpack-plugin dependency and replaces it with direct usage of the react-refresh package for bundling React Refresh functionality. This change aligns with the broader migration away from Webpack (as seen in the Storybook v10 update to Vite in #74396) and eliminates unnecessary webpack peer dependency warnings.
Changes:
- Removed
@pmmmwh/react-refresh-webpack-pluginfrom root dependencies - Created a local entry file for React Refresh that directly imports
react-refresh/runtime - Updated the vendor build script to use the new local entry file instead of the webpack plugin's entry
Reviewed changes
Copilot reviewed 1 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Removed @pmmmwh/react-refresh-webpack-plugin dependency |
| package-lock.json | Updated lock file to reflect dependency removal |
| bin/tsconfig.json | Added new react-refresh-entry.js to TypeScript exclude list |
| bin/packages/react-refresh-entry.js | New local entry file that imports react-refresh/runtime and injects it into the global hook |
| bin/packages/build-vendors.mjs | Updated to bundle the local react-refresh-entry.js instead of using the webpack plugin's entry file |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Member
Author
|
@youknowriad @jsnajdr @aduth following https://core.trac.wordpress.org/ticket/64393, should we simply remove bundling react-refresh? |
Member
|
cc also @t-hamano . It looks like the discussion there is pretty active lately in this specific feature, though I'm supposing that may not be relevant to the new build tooling? |
Contributor
We've realized that hot reload is probably not used much by consumers, but there's WordPress/wordpress-develop#10725 to restore the script for hot reload.
Considering this, it might be best to keep the react-refresh bundle for now. What do you think? |
Member
Author
From #74396 (comment)
From #74396 (comment)
|
Contributor
I think this is because it's WordPress trunk. It works fine with WordPress 6.9: 25c244484d78d8527413e5d26b81749b.mp4I'm not stuck to maintain the hot reload feature, but if we remove it, we'll also need to remove the flag from the scirpts package, update documentation, and submit a dev note for 7.0 cc @youknowriad |
Member
Author
Yes, that is why I mentioned |
The react-refresh-entry script was bundling its own copy of react-refresh/runtime, creating two separate runtime instances. This broke the hot module replacement because React uses the runtime from wp-react-refresh-runtime while the entry file was injecting a different runtime instance. This matches the production WordPress build where react-refresh/runtime is externalized to window.ReactRefreshRuntime." This change: - Updates react-refresh-entry.js to reference the ReactRefreshRuntime global provided by wp-react-refresh-runtime instead of importing react-refresh/runtime - Changes build-vendors.mjs to not bundle the entry file since it now only references an external global
Member
Author
|
Closing in favor of #74721. This can still serve as an example for replacing |
manzoorwanijk
deleted the
update/repalce-pmmmwh-react-refresh-webpack-plugin
branch
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
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.
What?
Follow-up to #74396
Replace
@pmmmwh/react-refresh-webpack-pluginwith direct usage ofreact-refreshpackage for bundling the React Refresh entry point.Why?
As noted in #74396 (comment), the
@pmmmwh/react-refresh-webpack-pluginpackage haswebpackas a peer dependency. Since we are moving away from Webpack (as seen in the Storybook v10 migration to Vite), we can use thereact-refreshpackage directly to eliminate the webpack peer dependency warning and achieve a cleaner separation from Webpack.The
react-refreshpackage is already a direct dependency, so this change simply uses it directly instead of going through the webpack plugin's entry file.How?
Created a new local entry file at
bin/packages/react-refresh-entry.jsthat:ReactRefreshRuntimeglobal provided bywp-react-refresh-runtimeglobalThis.__reactRefreshInjectedflagUpdated
bin/packages/build-vendors.mjsto:@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.jsRemoved
@pmmmwh/react-refresh-webpack-pluginfrompackage.jsonAdded
packages/react-refresh-entry.jsto the TypeScript exclude list inbin/tsconfig.jsonThe entry file references the
ReactRefreshRuntimeglobal (provided bywp-react-refresh-runtime) and callsinjectIntoGlobalHook(globalThis)to enable Fast Refresh during development. This matches the production WordPress build wherereact-refresh/runtimeis externalized towindow.ReactRefreshRuntime.Testing Instructions
npm installto update dependenciesnpm run buildand verify it completes successfullybuild/scripts/react-refresh-entry/index.min.jsbuild/scripts/react-refresh-entry/index.min.asset.phpbuild/scripts/react-refresh-runtime/index.min.jsbuild/scripts/react-refresh-runtime/index.min.asset.phpwindow.ReactRefreshRuntimeis available whenSCRIPT_DEBUGis enablednpx @wordpress/create-block@latest test-react-refresh --wp-env cd test-react-refresh npm run start -- --hot.wp-env.jsonhere in Gutenberg. Settingcoreto null means to use the production version, instead oftrunk.npm run wp-env startClick to see the diff
Test React Refreshblock from the above test plugintest-react-refreshaboveTesting Instructions for Keyboard
N/A - This PR does not change the user interface.
Screenshots or screencast
N/A - This is an internal build tooling change with no visual impact.