Assets: Add JSX runtime polyfill to prevent issues with React's automatic runtime being used to transform jsx #38428
Conversation
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available. Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped. Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Backup plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Boost plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Search plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Social plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Starter Plugin plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Protect plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Videopress plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Migration plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Mu Wpcom plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Inspect plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Wpcomsh plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Automattic For agencies client plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Classic Theme helper plugin plugin:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
… testing wp_default_scripts_hook
…fy whoever removes this to also clean up the related test
coder-karen
added
[Status] Needs Review
|
Use this same polyfill handling for Pods (modified for our stuff) and it worked great. |
There was a problem hiding this comment.
Nice! A few small notes inline.
Should we go ahead and update our existing @wordpress/dependency-extraction-webpack-plugin deps to 6.3.0 right away instead of waiting for the next renovate run to do it?
Also, we should remove this so Renovate will do it:
jetpack/.github/renovate.json5
Lines 45 to 50 in fcd933e
projects/packages/assets/changelog/fix-jsx-runtime-react-19-polyfill
Outdated
Show resolved
Hide resolved
| 'dependencies' => array( 'wp-i18n' ), | ||
| 'version' => filemtime( __DIR__ . "/$path" ), | ||
| ); | ||
| $jsx_path = 'js/react-jsx-runtime.js'; |
There was a problem hiding this comment.
This file doesn't exist.
OTOH, if the package hasn't been built I don't know of anything that will work right. Even if we were to create this file, the browser wouldn't process the import or require() correctly. Even if we point it at ../node_modules/react/cjs/react-jsx-runtime.production.min.js, that has a require() in it too.
So it might be best to just use ../build/react-jsx-runtime.js always (just hard-code it on line 537 instead of setting a $jsx_path at all IMO) and let the browser 404 on that if the package hasn't been built. 🤷
There was a problem hiding this comment.
Good point, I've gone with hard coding: ab51d24
| @@ -529,6 +531,11 @@ public static function wp_default_scripts_hook( $wp_scripts ) { | |||
| $wp_scripts->add( 'wp-jp-i18n-state', false, array( 'wp-deprecated', 'wp-jp-i18n-loader' ) ); | |||
| $wp_scripts->add_inline_script( 'wp-jp-i18n-state', 'wp.deprecated( "wp-jp-i18n-state", { alternative: "wp-jp-i18n-loader" } );' ); | |||
| $wp_scripts->add_inline_script( 'wp-jp-i18n-state', 'wp.jpI18nState = wp.jpI18nLoader.state;' ); | |||
|
|
|||
| // Register the React JSX runtime script - used as a polyfill until we can update JSX transforms. See https://github.com/Automattic/jetpack/issues/38424. | |||
| // Note: when removing this, also remove the inclusion of `react-jsx-runtime` from test_wp_default_scripts_hook where it is expected to be returned when the $mock calls the 'add' method. | |||
There was a problem hiding this comment.
Let's add a @todo here mentioning WordPress 6.5, because that's usually the first thing we look for when preparing PRs like #38386. 🙂
| // Note: when removing this, also remove the inclusion of `react-jsx-runtime` from test_wp_default_scripts_hook where it is expected to be returned when the $mock calls the 'add' method. | |
| // @todo Remove this when we drop support for WordPress 6.5 | |
| // Note: when removing this, also remove the inclusion of `react-jsx-runtime` from test_wp_default_scripts_hook where it is expected to be returned when the $mock calls the 'add' method. |
There was a problem hiding this comment.
Thanks for the tip. I extended the comment a bit to mention the test so added it in a new commit: ce92f21
projects/packages/assets/changelog/fix-jsx-runtime-react-19-polyfill
Outdated
Show resolved
Hide resolved
…lyfill Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>
…lyfill Co-authored-by: Brad Jorsch <anomiex@users.noreply.github.com>
…press/dependency-extraction-webpack-plugin
github-actions
bot
added
[Plugin] Automattic For Agencies Client
[Plugin] Backup
github-actions
bot
added
[Plugin] Boost
|
Thanks for the review!
I think I'll leave it for this PR as I personally haven't looked at everything else that the updated version may introduce, if relevant, so to be safe I think it's better in another PR.
Nice, thanks for pointing that out - I've removed that line now so auto-updating can happen. |
github-actions
bot
removed
the
[Status] Needs Review
Fixes #38424
Proposed changes:
dependency-extraction-webpack-pluginpackage or add any other relevant package that uses React's automatic runtime to transform JSX, as it prevents breakages caused by old JSX transforms used throughout the codebase.Other information:
Jetpack product discussion
#38424
Does this pull request change what data or activity we track or use?
No.
Testing instructions:
To test, you'll need WordPress 6.5.5 active on a test site.
tools/docker/wordpress/wp-admin, andtools/docker/wordpress/wp-includes. Then replacetools/docker/wordpress/wp-settings.php. I found this was enough to be able to replicate the issue and test the fix.To replicate the issue:
webpack.config.jsandclass-assets.php."@wordpress/dependency-extraction-webpack-plugin"(there should be 6), and change the version to 6.0.0.jetpack build --deps plugins/jetpack./wp-admin/admin.php?page=my-jetpack. The main My Jetpack UI doesn't load anything./wp-admin/admin.php?page=jetpack#/dashboard. The main content area doesn't load anything./wp-admin/admin.php?page=jetpack-social/wp-admin/options-general.php?page=automattic-for-agencies-client/wp-admin/admin.php?page=jetpack-backup/wp-admin/admin.php?page=jetpack-search/wp-admin/admin.php?page=jetpack-videopressTo test the fix: