React error #31 in IE11

[dariaknl]

How can we reproduce this behavior?

1. Use IE11.
2. Activate Gutenberg 4.3.
3. Go to SEO -> General.
4. Check console:
   

https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D&args[]=

5. Open Conf wizard - it is not loaded.
6. Open Dashboard - Yoast SEO Posts Overview is not loaded.

Technical info

• WordPress version: 4.9.8
• Yoast SEO version: 9.2 RC2

[afercia]

Setting WP_DEBUG to true can help.

SEO > General

Configuration Wizard:

It appears we've already faced this issue. See #10539

I've seen in paths.js babel-polyfill is last:
Moving it as first thing in the vendor array fixes it for me. Metabox rendered in IE 11 with no errors. I'd strongly recommend to double check and test also on another Windows machine with IE 11.

Fixed in August in #10570

Then it was moved down in e5cf9a5#diff-a37b1891048cd474f06c611907cd00a0

Moved again to webpack/webpack.config.js in 01b3bf6#diff-a37b1891048cd474f06c611907cd00a0

Then, the refactoring of the dependencies happened.

Unfortunately, for Internet Explorer 11, some polyfills must be loaded as first thing before React and ReactDOM. Reference (Dan Abramov):
facebook/react#8379 (comment)

Additionally, we're now also importing babel-polyfill in js/src/wp-seo-analysis-worker.js.
More importantly, wp-polyfill is now registered as dependency for many scripts so it's enqueued after React and ReactDOM.

If we want to support IE11, this requires some re-thinking of the webpack configuration and the dependencies in order to ensure:

• babel-polyfill is loaded (or compiled in the build) before React and ReactDOM
• there's only one instance of babel-polyfill