wordpress-seo icon indicating copy to clipboard operation
wordpress-seo copied to clipboard

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

Open EverStarck opened this issue 1 year ago • 9 comments

  • [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

EverStarck avatar Nov 05 '24 21:11 EverStarck

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.

josevarghese avatar Nov 06 '24 09:11 josevarghese

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 avatar Nov 06 '24 13:11 ibonilla

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.

ibonilla avatar Nov 06 '24 15:11 ibonilla

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 avatar Nov 07 '24 07:11 josevarghese

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.

josevarghese avatar Nov 07 '24 13:11 josevarghese

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

maybellyne avatar Nov 14 '24 15:11 maybellyne

Just adding here that this issue is really annoying for Agencies working on sites where we develop custom solutions. Getting the entire browser console flooded by Yoast really makes working on your own custom code much harder.

I would love to see this get prioritized more than it seemingly is right now.

fabiankaegy avatar Mar 19 '25 10:03 fabiankaegy

Please inform the customer of conversation # 1260558 when this conversation has been closed.

josevarghese avatar May 27 '25 09:05 josevarghese

Any update on this? I am experiencing the same thing. These should not be logged as error, but as warnings. Or better they should be fixed because this is never going back to defaultProps like this posts says https://github.com/facebook/react/issues/29233

melcarthus avatar May 30 '25 10:05 melcarthus

Also experiencing the issue, and I second @fabiankaegy comment. My savvy clients have a tendency to open up the console to see if anything is out of place. A sea of red messages is problematic

HelloPikari avatar Aug 13 '25 16:08 HelloPikari

Our team is working on making React 19 compatibility internally, and you can see some progress in the public repo: https://github.com/Yoast/wordpress-seo/pulls?q=is%3Apr+react

josevarghese avatar Aug 20 '25 10:08 josevarghese