Invariant Violation/Minified React Error #31 on Welcome to The Gutenberg Editor #8150

cassands · 2018-07-23T20:58:29Z

While testing some plugins, I came across an error that made the editor completely disappear from "Welcome to The Gutenberg Editor". After receiving the error, I deactivated all plugins and successfully reproduced the error.

While I'm not sure if this is anything major given it only occurred on the "Welcome to The Gutenberg Editor" sample post, I wanted to make note of this. I don't know React well enough to know what's going on here or why it's only on one page.

Expected Behavior:
I was expecting the information about the number of paragraphs, etc on the page to be displayed when the circle with an "i" (content structure) was clicked.

Actual Behavior:
The entire editor disappeared, everything except for the Wordpress sidebar and header disappearing. A message with 3 buttons appeared [Attempt Recovery], [Copy Post Text], and [Copy Error]. The editor reappeared upon leaving the post and re-entering it.

Text from Copy Error:
Invariant Violation: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btype%2C%20props%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Sg ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:142:327)
at m ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:12:388)
at Xb ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:79:171)
at If ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:82:291)
at v ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:84:389)
at [redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:88:328
at rd ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:91:10)
at O ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:90:455)
at yh ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:105:190)
at lg ([redacted]/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:88)

Error Text from URL:
Objects are not valid as a React child (found: object with keys {type, props}).

Steps to reproduce:
On "Welcome to the Gutenberg Editor" Sample Post (draft)

Click Anywhere
click the "i" in a circle (content structure) on the toolbar

Notes about actions taken:

Managed to reproduce the error on every block tried on that draft post.
Was not able to reproduce the error on a different non-draft post.
Was not able to reproduce the error on a new draft post.
Error did not go away upon publishing "Welcome to the Gutenberg Editor" sample post.
Managed to reproduce the error on page information instead of just block information.
Attempt Recovery did not solve the error.
Deleting the post and re-entering it through the Gutenberg plugin menu did not solve the error.
Updating the browser did not solve the error.
Changing the browser did not solve the error.
Updated to Gutenberg 3.3.0 today before encountering this error.

I did not try deleting the Gutenberg folder and re-downloading it in case of a corrupt file somewhere.

Computer Information:
Windows 7
Browsers Tried:
Opera 54.0.2952.60
Chrome 67.0.3396.99

designsimply · 2018-07-24T00:57:55Z

Can you try clearing local browser cache and then try again? If that doesn't solve the problem, could you reply back with notes about which plugins you were testing when the problem happened and if you are able could you deactivate the other plugins to see if that makes the problem go away?

Since I am not sure whether this is a bug or not yet, I'm going to close the issue. If you reply back with more information to confirm the issue then we can reopen!

cassands · 2018-07-24T12:57:25Z

It still occurs in both browsers (Opera & Chrome) with the cache cleared. As I mentioned I already tried deactivating all plugins. That had actually been my first thought and I'd originally gone through the diagnostic steps I did, intending to make a report to whichever plugin was the issue. However it still occurs without any plugins active except Gutenberg itself.

As a bonus I also deleted Gutenberg entirely and re-downloaded it. The issue persists. I then tried IE11 and Firefox 61.0.1 which both give the error as well. This is definitely the weirdest thing I've encountered thus far.

The plugins I was rotating through and testing:
Advanced Gutenberg
Advanced Gutenberg Blocks
Advanced WordPress Backgrounds
Atomic Blocks
Gutenberg Custom Fields
Stackable

All, some, or none of these plugins active, that one page still errors out. I can work around it for now easily enough, but I couldn't pinpoint what was causing it; hence the report.

Thanks for trying to help with this.

designsimply · 2018-07-25T01:58:00Z

Thanks for the extra info! I tested today and was able to reproduce the problem where clicking the "Content Structure" icon on the sample post results in an error followed by a blank screen using Gutenberg 3.3 and the steps you provided:

Click "Gutenberg" in the left menu to open the "Welcome to the Gutenberg Editor" sample post.
Click the "Content Structure" icon "(i)" in the editor toolbar.

Result: as soon as the Content Structure icon is clicked on the sample post, the following message, options, and console warnings/errors appear:

The editor has encountered an unexpected error.

Attempt Recovery
Copy Post Text
Copy Error

block id prop in edit function is deprecated and will be removed from Gutenberg in 3.4. Please use block clientId prop instead. Note: This is a global warning, shown regardless of whether blocks exist using the deprecated prop.
index.js:1:5685

Invariant Violation: "Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Btype%2C%20props%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. "
react-dom.min.82e21c65.js:110:57

^{Seen at http://alittletestblog.com/wp-admin/post-new.php?gutenberg-demo running WordPress 4.9.7 and Gutenberg 3.3.0 using Firefox 61.0.1 on macOS 10.13.6.}

aduth · 2018-07-25T17:28:43Z

Unminified error:

Invariant Violation: Objects are not valid as a React child (found: object with keys {type, props}). If you meant to render a collection of children, use an array instead.
    in span (created by TableOfContentsItem)
    in button (created by TableOfContentsItem)
    in li (created by TableOfContentsItem)
    in TableOfContentsItem (created by DocumentOutline)
    in ul (created by DocumentOutline)
    in div (created by DocumentOutline)
    in DocumentOutline (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in Unknown (created by WithDispatch(DocumentOutline))
    in WithDispatch(DocumentOutline) (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(WithDispatch(DocumentOutline)) (created by TableOfContentsPanel)
    in TableOfContentsPanel (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(TableOfContentsPanel) (created by Dropdown)
    in div (created by Popover)
    in div (created by Popover)
    in PopoverDetectOutside (created by WrappedPopoverDetectOutside)
    in WrappedPopoverDetectOutside (created by Popover)
    in Unknown (created by WithFocusReturn(Component))
    in div (created by WithFocusReturn(Component))
    in WithFocusReturn(Component) (created by WithConstrainedTabbing(WithFocusReturn(Component)))
    in div (created by WithConstrainedTabbing(WithFocusReturn(Component)))
    in WithConstrainedTabbing(WithFocusReturn(Component)) (created by Popover)
    in Fill (created by Popover)
    in span (created by Popover)
    in Popover (created by Dropdown)
    in div (created by Dropdown)
    in div (created by Dropdown)
    in Dropdown (created by TableOfContents)
    in TableOfContents (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(TableOfContents) (created by HeaderToolbar)
    in div (created by NavigableContainer)
    in NavigableContainer (created by NavigableMenu)
    in NavigableMenu (created by NavigableToolbar)
    in NavigableToolbar (created by HeaderToolbar)
    in HeaderToolbar (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithViewportMatch(HeaderToolbar) (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(WithViewportMatch(HeaderToolbar)) (created by Header)
    in div (created by Header)
    in Header (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in Unknown (created by WithDispatch(Header))
    in WithDispatch(Header) (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(WithDispatch(Header)) (created by Layout)
    in div (created by Layout)
    in Layout (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithViewportMatch(Layout) (created by NavigateRegions(WithViewportMatch(Layout)))
    in div (created by NavigateRegions(WithViewportMatch(Layout)))
    in NavigateRegions(WithViewportMatch(Layout)) (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in Unknown (created by WithDispatch(NavigateRegions(WithViewportMatch(Layout))))
    in WithDispatch(NavigateRegions(WithViewportMatch(Layout))) (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(WithDispatch(NavigateRegions(WithViewportMatch(Layout)))) (created by Editor)
    in ErrorBoundary (created by Editor)
    in RichTextProvider (created by EditorProvider)
    in SlotFillProvider (created by EditorProvider)
    in APIProvider (created by EditorProvider)
    in DropZoneProvider (created by EditorProvider)
    in EditorProvider (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in Unknown (created by WithDispatch(EditorProvider))
    in WithDispatch(EditorProvider) (created by Editor)
    in Editor (created by _class)
    in _class (created by RemountOnPropChange(_class))
    in RemountOnPropChange(_class)
    in WithSelect(Editor)
    at invariant (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:59:15)
    at throwOnInvalidObjectType (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:12476:5)
    at createChild (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:12687:7)
    at reconcileChildrenArray (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:12919:25)
    at reconcileChildFibers (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:13233:14)
    at reconcileChildrenAtExpirationTime (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:13593:28)
    at reconcileChildren (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:13584:3)
    at updateFragment (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:13640:3)
    at beginWork (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:14416:14)
    at performUnitOfWork (http://editor.test/wp-content/plugins/gutenberg/vendor/react-dom.24169eaf.js:16441:12)

aduth · 2018-07-25T17:30:04Z

I suspect this is a regression caused by #7934, where we are attempting to render one of these RichText values directly as a React child within the DocumentOutline:

{
  "type": "em",
  "props": {
    "children": [
      "Inserter"
    ]
  }
}

It becomes an issue specifically for the heading which includes italics ("The Inserter Tool"), and could be reproduced with any post including headings which have any specially formatted inline text.

To me, it seems like we shouldn't need to reflect this italicizing in the document outline. Or, if the idea is to render the rich text value directly, we could use the RichText.Content component which is normally used with save implementations.

designsimply · 2018-07-25T18:37:27Z

Closing in favor of #8160 (which is a duplicate but more succinct). Thank you for the report @cassands! Please follow #8160 for updates.

KishokanthJeganathan · 2020-06-22T19:42:16Z

Im getting the same error :( Can anyone see where the issue is?

9:40:34 PM: warning chunk styles [mini-css-extract-plugin]
9:40:34 PM: Conflicting order. Following module has been added:
9:40:34 PM: * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-1!./src/components/index-page/textHolder/textHolder.module.css
9:40:34 PM: despite it was not able to fulfill desired ordering with these modules:
9:40:34 PM: * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-1!./src/components/global/newsLetter/newsLetter.module.css
9:40:34 PM: - couldn't fulfill desired order of chunk group(s) component---src-templates-blog-template-js

while fulfilling desired order of chunk group(s) component---src-pages-index-js
9:40:34 PM: success Building production JavaScript and CSS bundles - 38.116s
9:40:34 PM: success Rewriting compilation hashes - 0.002s
9:40:34 PM: success run queries - 40.046s - 14/14 0.35/s
9:40:40 PM: failed Building static HTML for pages - 5.672s
9:40:40 PM: error Building static HTML failed for path "/blog/historia-falafela"
9:40:40 PM:
9:40:40 PM:
9:40:40 PM: WebpackError: Minified React error Adjust insert-block menu position and button focus. #31; visit https://reactjs.org/docs/error-d ecoder.html?invariant=31&args[]=object%20with%20keys%20%7Bdata%2C%20content%2C %20nodeType%7D&args[]= for the full message or use the non-minified dev enviro nment for full errors and additional helpful warnings.
9:40:40 PM:

kucharzgotuje · 2021-02-27T10:43:07Z

Same issue here, exactly described here:
https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7Brendered%7D&args[]

Tried on fresh, out-of-the-box copy of wordpress without ANY plugins or templates.

alex-dev-junior · 2021-12-14T10:35:02Z

Faced this problem. Could you describe in more detail how to solve it?

designsimply closed this as completed Jul 24, 2018

designsimply added the [Type] Help Request Help with setup, implementation, or "How do I?" questions. label Jul 24, 2018

designsimply added [Type] Bug An existing feature does not function as intended Backwards Compatibility Issues or PRs that impact backwards compatability and removed [Type] Help Request Help with setup, implementation, or "How do I?" questions. labels Jul 25, 2018

designsimply reopened this Jul 25, 2018

designsimply added this to the 3.4 milestone Jul 25, 2018

designsimply added General Interface Parts of the UI which don't fall neatly under other labels. and removed Backwards Compatibility Issues or PRs that impact backwards compatability labels Jul 25, 2018

designsimply closed this as completed Jul 25, 2018

designsimply mentioned this issue Jul 25, 2018

Document Outline: Exception caused by headings with formatting #8160

Closed

chrisvanpatten mentioned this issue Jul 27, 2018

Add word counts #8242

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Invariant Violation/Minified React Error #31 on Welcome to The Gutenberg Editor #8150

Invariant Violation/Minified React Error #31 on Welcome to The Gutenberg Editor #8150

cassands commented Jul 23, 2018

designsimply commented Jul 24, 2018

cassands commented Jul 24, 2018

designsimply commented Jul 25, 2018 •

edited

Loading

aduth commented Jul 25, 2018

aduth commented Jul 25, 2018 •

edited

Loading

designsimply commented Jul 25, 2018

KishokanthJeganathan commented Jun 22, 2020

kucharzgotuje commented Feb 27, 2021

alex-dev-junior commented Dec 14, 2021

Invariant Violation/Minified React Error #31 on Welcome to The Gutenberg Editor #8150

Invariant Violation/Minified React Error #31 on Welcome to The Gutenberg Editor #8150

Comments

cassands commented Jul 23, 2018

designsimply commented Jul 24, 2018

cassands commented Jul 24, 2018

designsimply commented Jul 25, 2018 • edited Loading

aduth commented Jul 25, 2018

aduth commented Jul 25, 2018 • edited Loading

designsimply commented Jul 25, 2018

KishokanthJeganathan commented Jun 22, 2020

kucharzgotuje commented Feb 27, 2021

alex-dev-junior commented Dec 14, 2021

designsimply commented Jul 25, 2018 •

edited

Loading

aduth commented Jul 25, 2018 •

edited

Loading