Failed to execute 'postMessage' on 'Worker' error when adding image to FAQ block

[oksanayoast]

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

Please give us a description of what happened

To Reproduce

Step-by-step reproduction instructions

1. Install and activate Yoast SEO 21.6
2. Create a post and add FAQ block
3. Add an image to the FAQ block
4. Check console

Expected results

1. No errors

Actual results

1. analysis.js?ver=3374b713a9db5df4c15dc593557f1085:321 Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': Symbol(react.element) could not be cloned.

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
• Gutenberg Editor
• Elementor Editor
• Classic Editor
• Other:

• Which browser is affected (or browsers):

• Chrome
• Firefox
• Safari
• Other:

Used versions

• Device you are using:
• Operating system:
• PHP version:
• WordPress version:
• WordPress Theme:
• Yoast SEO version:
• Gutenberg plugin version:
• Elementor plugin version:
• Classic Editor plugin version:
• Relevant plugins in case of a bug:

[b0c0de]

@oksanayoast

Imagine your website is like a busy city. You have the main street where everything happens (the main thread), and you also have hidden alleys where specific tasks are done without slowing down traffic (web workers).

YoastSEO uses these alleys to analyze your website and give you helpful tips. But sometimes, it tries to send a special guest (a React element) through the alley, which is a bit like sending a fancy car down a narrow path. The alley gets stuck because it can't handle the guest!

This is what the error message means: YoastSEO tried to send something called a "React element" to a web worker, but it couldn't because it's not allowed.

Here's what you can do:

Find the alley entrance: Look for where YoastSEO is sending the guest. It's probably trying to tell the web worker something about your website.
Dress the guest down: Instead of sending the fancy car, send just the information the worker needs. Think of it like sending a simple message instead of the whole car.
Take another route: If the information isn't essential, maybe YoastSEO can leave the guest at home and use another way to tell the workers what they need to know.
Update the city: Maybe the alley is old and needs fixing. Check if there's a newer version of YoastSEO that might have a better path for the guest.
Tell the city builders: If you can't fix it yourself, let the YoastSEO team know so they can improve the alleys for everyone.

Remember, the goal is to help the web workers do their job without causing traffic jams. By finding the right way to send information, you can keep your website running smoothly and get the best tips from YoastSEO!

I hope this makes it a bit easier to understand! Don't worry if you're not a tech expert, just think of it like a city with different areas and ways to get things done.

[mhkuu]

Very much like https://github.com/Yoast/wordpress-seo-premium/issues/4207 - we should be able to apply a similar solution.