Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

EverStarck commented 2 weeks ago

[x] I've read and understood the contribution guidelines.
[x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened

When in the default Gutenberg editor, the console shows lots of Warning: E: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead (full error below)

These errors don’t show when the Yoast plugin deactivated.

Full error:

Warning: Ks: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at Ks (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:225:1008)
at div
at nr (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:272:1139
at SlotComponent (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33330:5)
at Slot
at UnforwardedSlot (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33890:5)
at t (https://localhost/wp-content/plugins/wordpress-seo/js/dist/externals/uiLibrary.js?ver=0499348f9e5ab4c08abf:1:591)
at _e (https://localhost/wp-content/plugins/wordpress-seo/js/dist/externals/styledComponents.js?ver=f030a78c47ee9be46c07:1:29679)
at x (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:16:2199)
at N (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:16:6414)
at L (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:16:3062)
at vo (https://localhost/wp-content/plugins/wordpress-seo/js/dist/block-editor.js?ver=5d9eb0a02f8c7b68e3ca:563:3518)
at w (https://localhost/wp-content/plugins/wordpress-seo/js/dist/externals-contexts.js?ver=10ecaeb7fee15b420938:1:437)
at render
at PluginErrorBoundary (https://localhost/wp-includes/js/dist/plugins.js?ver=cd5358b6369eff6f7b85:291:5)
at div
at PluginArea (https://localhost/wp-includes/js/dist/plugins.js?ver=cd5358b6369eff6f7b85:602:3)
at Layout (https://localhost/wp-includes/js/dist/edit-post.js?ver=31dde9e0afebadcf425c:2763:3)
at ErrorBoundary (https://localhost/wp-includes/js/dist/editor.js?ver=e15506639990b108fc28:9270:5)
at BlockRefsProvider (https://localhost/wp-includes/js/dist/block-editor.js?ver=2cb36d67922bfdc27a1d:19804:3)
at Provider (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33905:3)
at https://localhost/wp-includes/js/dist/block-editor.js?ver=2cb36d67922bfdc27a1d:41829:5
at https://localhost/wp-includes/js/dist/block-editor.js?ver=2cb36d67922bfdc27a1d:41367:3
at BlockContextProvider (https://localhost/wp-includes/js/dist/block-editor.js?ver=2cb36d67922bfdc27a1d:39048:3)
at EntityProvider (https://localhost/wp-includes/js/dist/core-data.js?ver=1b304f4025915ff3c84b:6964:3)
at EntityProvider (https://localhost/wp-includes/js/dist/core-data.js?ver=1b304f4025915ff3c84b:6964:3)
at https://localhost/wp-includes/js/dist/editor.js?ver=e15506639990b108fc28:21362:3
at https://localhost/wp-includes/js/dist/editor.js?ver=e15506639990b108fc28:18997:3
at SlotFillProvider (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33743:3)
at provider_SlotFillProvider (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33841:3)
at Provider (https://localhost/wp-includes/js/dist/components.js?ver=54eab95952fe254d64e9:33905:3)
at Editor (https://localhost/wp-includes/js/dist/edit-post.js?ver=31dde9e0afebadcf425c:3062:11)

I got this from https://wordpress.org/support/topic/yoast-error-on-mobile-view/#post-17985225, but I'm having exactly the same issue. It appears as "resolved" but I think there was a mix of issues, since the fix was for Post Editor: Editor canvas squashed by metabox in mobile/tablet view

Screenshots, screen recording, code snippet

If possible, please provide a screenshot, a screen recording or a code snippet which demonstrates the bug.

Technical info

If relevant, which editor is affected (or editors):
[ ] Block Editor
[x] Gutenberg Editor
[ ] Elementor Editor
[ ] Classic Editor
[ ] Other:

Which browser is affected (or browsers):
[x] Chrome
[x] Firefox
[x] Safari
[ ] Other:

Used versions

Device you are using: Mac m1 pro
Operating system: Macos 13.2
PHP version: 7.4.33
WordPress version: 6.6.2
WordPress Theme:
Yoast SEO version: 23.8
Relevant plugins in case of a bug: Yoast

josevarghese commented 2 weeks ago

Hi @EverStarck

Thanks for creating the issue. I tested this on multiple sites created using https://playground.wordpress.net/ and https://instawp.com, but I cannot replicate the errors you have pointed out when checking via the Gutenberg editor plugin. Can you please share the exact steps to replicate this, once after reproducing it on the sites created using the above platforms?

We look forward to hearing from you and are happy to help you.

ibonilla commented 2 weeks ago

Thanks @josevarghese for your help checking this. I'm also able to reproduce using the latest WP 6.7 RC: https://playground.wordpress.net/?plugin=wordpress-seo&php=8.3&wp=beta

You should be able to see the warnings in the javascript console by going to the post editor, for example /wp-admin/post.php?post=2&action=edit

My guess is that it's related to WordPress now using React 18.3 since version 6.6 as mentioned in this dev note. As referenced there defaultProps is now deprecated and should be replaced with ES6 default params.

I see several instances in the Yoast SEO Wordpress plugin code that'll need to be reviewed.

ibonilla commented 2 weeks ago

After a bit more research I found that the warnings I'm noticing in the playground do seem to indeed come from Yoast (they don't show up using https://playground.wordpress.net/?php=8.3&wp=beta) however the one reported by @EverStarck about the defaultProps is not there.

We are able to reproduce locally by setting the SCRIPT_DEBUG to true in wp-config.php but I'll check if there's a way to reproduce it in the playground in some other way.

josevarghese commented 2 weeks ago

Hi @ibonilla

Thanks for the details. Yes, I am now able to replicate the error when the SCRIPT_DEBUG is set as true. However, when I tested with the 6.7-RC3 without setting the SCRIPT_DEBUG, the error did not occur over it.

josevarghese commented 2 weeks ago

Hi,

I discussed this with our development team, who informed me that they are aware of the SCRIPT_DEBUG constant showing console errors when the React dev build is loading on the page. They also have a list of tasks for making the React 19 compatibility internally. However, I would like to inform you that this compatibility change will take some time (not very soon), and you can expect a fix in future versions.

maybellyne commented 1 week ago

+1 https://wordpress.org/support/topic/yoast-plugin-possibly-preventing-automatic-updates/

Yoast / wordpress-seo