Gutenberg crashes when opening Categories & Tags

[hedgefield]

Issue Overview

This seems to be caused by plugin metaboxes hooking into specific parts of Gutenberg. Related to #3929?

Chrome 62.0.3202.94
WP 4.9.1 vagrant
Gutenberg 1.9

Steps to Reproduce

1. Install plugin that does something with categories or tags (I used Yoast SEO Premium)
2. Open Gutenberg demo post
3. Click on Categories & Tags
4. Gutenberg crashes with an Unexpected Error.

Clicking Attempt Recovery does nothing. ALL other posts have the same error, even when selecting Add New (because the Categories & Tags section is technically still expanded).

To 'fix':

1. Deactivate offending plugin
2. Go back to the Demo post
3. Close the Categories & Tags section
4. Reactivate Yoast SEO Free

Error message

TypeError: e.types.indexOf is not a function
at http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:21:108874 at http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:50595 at http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:59929 at o (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:19682) at http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:60059 at o (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:50575) at o (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:6:15944) at o (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/editor/build/index.js?ver=1513096097:21:108835) at beginWork (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:133:69) at d (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:158:393) at f (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:159:214) at g (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:159:462) at t (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:167:3) at x (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:166:247) at batchedUpdates (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:169:173) at cc (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:26:56) at jc (http://src.wordpress-develop.dev/wp-content/plugins/gutenberg/vendor/react-dom.min.3583f8be.js:35:5)

[aduth]

Can this be reproduced with a non-premium plugin, or could you otherwise make said premium plugin available for me to test?

[karmatosed]

Just confirming I can't replicate this with ACF or the free version of Yoast.

[hedgefield]

Yeah I was hoping to have a free example too but I couldn't find one on short notice. Yoast SEO Premium includes the prominent words feature, which adds a private tag taxonomy, so that might be the difference (I tried it with Free too but indeed that one doesn't cause the problem). I'll arrange for a premium license for troubleshooting when I get to the office tomorrow.

[hedgefield]

I've provided @aduth with a premium plugin to test. Seems like ACF Pro also causes a crash #3965 but apparently for a different reason?

[aduth]

@hedgefield Thanks, I was able to reproduce and track down the issue. I'm inclined to call this a bug in Yoast, since the root cause is that the yst_prominent_words taxonomy is registered with a keyed array rather than a simple array of post types, i.e.

// Expected:
register_taxonomy(
	'yst_prominent_words',
	array( 'post', 'page', 'attachment' ),
	array( /* ... */ )
);

// Actual:
register_taxonomy(
	'yst_prominent_words',
	array( 'post' => 'post', 'page' => 'page', 'attachment' => 'attachment' ),
	array( /* ... */ )
);

This is because the underlying WPSEO_Post_Type::get_accessible_post_types uses get_post_types which returns the array in this format.

The error occurs because Gutenberg expects the REST API taxonomy's types property to be an array, but in this case it is returned as an object (no Object#indexOf). Gutenberg is following the schema of the endpoint, which specifies that types is an array of strings†:

https://github.com/WordPress/wordpress-develop/blob/726f5f7/src/wp-includes/rest-api/endpoints/class-wp-rest-taxonomies-controller.php#L283-L291

† I might have expected the REST API to be a bit more strict about ensuring these schema types are rendered as promised.

[aduth]

While I don't want to set a precedent of accommodating non-schema-conforming API results, we could alternatively use the more relaxed _.includes to test the taxonomy's types:

gutenberg|master⚡ ⇒ n_         
n_ > _.includes( [ 'post', 'page' ], 'post' );
true
n_ > _.includes( { 'post': 'post', 'page': 'page' }, 'post' );
true

[hedgefield]

Thanks a bunch for figuring out the problem @aduth. I'll bring your findings to the devs here and see if we can solve it from our end.

[aduth]

Workaround proposed at #3972

[eboye]

I've got this error in Chrome and Firefox. Here's the error:

value@https://test.local/wp-content/plugins/gutenberg/build/editor/index.js:12:293335
value@https://test.local/wp-content/plugins/gutenberg/build/editor/index.js:12:295183
e@https://test.local/wp-content/plugins/gutenberg/vendor/lodash.min.59550321.js:68:155
f@https://test.local/wp-content/plugins/gutenberg/vendor/lodash.min.59550321.js:68:465
value@https://test.local/wp-content/plugins/gutenberg/build/editor/index.js:12:292935
jc@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:134:121
gc@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:127:223
vb@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:230
ub@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:65
wg@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:137:182
Ze@https://test.local/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:41:24

At first I was having error only in Chrome, but in Firefox when I switched from block tab to document it gave me this error and since then I can not go back to write a post.

I don't have in SEO plugins install like Yoast SEO etc.