Yoast SEO 8.0 does not work in IE11

[dariaknl]

How can we reproduce this behavior?

1. In IE11 activate Gutenberg
2. In IE11 activate Yoast SEO free 8.0 RC1

Check post in Classic Editor:

Check post in Gutenberg:

Error:

> Invariant Violation: Minified React error #143; visit https://reactjs.org/docs/error-decoder.html?invariant=143 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
>   at r (http://localhost/wordpress/wp-content/plugins/wordpress-seo/js/dist/commons-80-RC1.min.js?ver=8.0-RC1:6:14478)
>   at r (http://localhost/wordpress/wp-content/plugins/wordpress-seo/js/dist/commons-80-RC1.min.js?ver=8.0-RC1:6:42864)
>   at U.Children.only (http://localhost/wordpress/wp-content/plugins/wordpress-seo/js/dist/commons-80-RC1.min.js?ver=8.0-RC1:14:1464)
>   at n.prototype.render (http://localhost/wordpress/wp-content/plugins/wordpress-seo/js/dist/wp-seo-post-scraper-80-RC1.min.js?ver=8.0-RC1:59:72656)
>   at Xf (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:91:253)
>   at yh (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:102:310)
>   at lg (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:82)
>   at mg (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:384)
>   at gc (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:127:200)
>   at vb (http://localhost/wordpress/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:230)

Technical info

• WordPress version: 4.9.8
• Yoast SEO version: 8.0 RC1

[moorscode]

I think the easiest way to test this and have output that you can use: build the project locally with grunt build:js and copy the folder onto an USB drive (or use some online service) to transfer it onto the Windows laptop Daria has for testing purposes.

[afercia]

Building release/8.0 on Windows and using IE11 shows these errors:

SCRIPT5022: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

The above error occurred in the <Connect(Metabox)> component:
    in Connect(Metabox) (created by MetaboxPortal)
    in MetaboxPortal
    in t
...

[afercia]

In the Gutenberg page there's one more error:

SCRIPT5022: React.Children.only expected to receive a single React element child.
post.php (49,5)

of course, being IE11, line 49 in post.php seems to be completely not relevant.

[afercia]

OK so first thing: building on Windows I was getting this error:

and yarn add babel-preset-stage-0 fixed it. This was unrelated though. Inspired by this comment: facebook/react#8379 (comment) I've seen in paths.js babel-polyfill is last:

wordpress-seo/webpack/paths.js

Line 13 in 27a8ac6

"babel-polyfill",

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.