“This block has encountered an error and cannot be previewed”

  • I am using the current version of WordPress (5.1) on a self-hosted server, and all of my plugins are up to date.

    I am having troubles creating a blog post using Gutenberg editor.

    My problems are specifically to do with the Visual editor of Gutenberg, which seems to crash whenever I try to edit paragraph or heading blocks.

    If I create a block with the Code editor, it will show up as a preview in the Visual editor. But whenever I click on that block to edit it, the individual block will ‘crash’ with this error message displaying in place:

    “This block has encountered an error and cannot be previewed.”

    Photos of error: before and after screenshots

    Before: Here is what the blocks originally look like in the preview:

    View post on imgur.com

    After: And here is what the heading and paragraph blocks look like after I click on them to attempt to edit:

    View post on imgur.com

    Here is the output of the Ctrl+Shift+J console, showing the errors for each of the times I click on blocks:

    JQMIGRATE: Migrate is installed, version 1.4.1
react-dom.min.js?ver=16.6.3:104 TypeError: Object(...) is not a function
    at n.value (editor.min.js:55)
    at n.value (editor.min.js:55)
    at zc (react-dom.min.js?ver=16.6.3:146)
    at wc (react-dom.min.js?ver=16.6.3:138)
    at fa (react-dom.min.js?ver=16.6.3:137)
    at ng (react-dom.min.js?ver=16.6.3:149)
    at Se (react-dom.min.js?ver=16.6.3:40)
Pf @ react-dom.min.js?ver=16.6.3:104
Xf.f.function.f.componentDidCatch.c.callback @ react-dom.min.js?ver=16.6.3:113
uf @ react-dom.min.js?ver=16.6.3:65
tf @ react-dom.min.js?ver=16.6.3:65
zc @ react-dom.min.js?ver=16.6.3:146
wc @ react-dom.min.js?ver=16.6.3:138
fa @ react-dom.min.js?ver=16.6.3:137
ng @ react-dom.min.js?ver=16.6.3:149
Se @ react-dom.min.js?ver=16.6.3:40
react-dom.min.js?ver=16.6.3:17 Uncaught TypeError: Object(...) is not a function
    at n.value (editor.min.js:55)
    at n.value (editor.min.js:55)
    at Object.Fg (react-dom.min.js?ver=16.6.3:154)
    at Eg (react-dom.min.js?ver=16.6.3:13)
    at Hg (react-dom.min.js?ver=16.6.3:13)
    at ae (react-dom.min.js?ver=16.6.3:15)
    at Ig (react-dom.min.js?ver=16.6.3:155)
    at Hc (react-dom.min.js?ver=16.6.3:15)
    at Jc (react-dom.min.js?ver=16.6.3:16)
    at gh (react-dom.min.js?ver=16.6.3:39)
value @ editor.min.js:55
value @ editor.min.js:55
Fg @ react-dom.min.js?ver=16.6.3:154
Eg @ react-dom.min.js?ver=16.6.3:13
Hg @ react-dom.min.js?ver=16.6.3:13
ae @ react-dom.min.js?ver=16.6.3:15
Ig @ react-dom.min.js?ver=16.6.3:155
Hc @ react-dom.min.js?ver=16.6.3:15
Jc @ react-dom.min.js?ver=16.6.3:16
gh @ react-dom.min.js?ver=16.6.3:39
lg @ react-dom.min.js?ver=16.6.3:148
re @ react-dom.min.js?ver=16.6.3:23
Xb @ react-dom.min.js?ver=16.6.3:40
ng @ react-dom.min.js?ver=16.6.3:149
Se @ react-dom.min.js?ver=16.6.3:40
react-dom.min.js?ver=16.6.3:104 TypeError: Object(...) is not a function
    at n.value (editor.min.js:55)
    at n.value (editor.min.js:55)
    at zc (react-dom.min.js?ver=16.6.3:146)
    at wc (react-dom.min.js?ver=16.6.3:138)
    at fa (react-dom.min.js?ver=16.6.3:137)
    at ng (react-dom.min.js?ver=16.6.3:149)
    at Se (react-dom.min.js?ver=16.6.3:40)
Pf @ react-dom.min.js?ver=16.6.3:104
Xf.f.function.f.componentDidCatch.c.callback @ react-dom.min.js?ver=16.6.3:113
uf @ react-dom.min.js?ver=16.6.3:65
tf @ react-dom.min.js?ver=16.6.3:65
zc @ react-dom.min.js?ver=16.6.3:146
wc @ react-dom.min.js?ver=16.6.3:138
fa @ react-dom.min.js?ver=16.6.3:137
ng @ react-dom.min.js?ver=16.6.3:149
Se @ react-dom.min.js?ver=16.6.3:40
react-dom.min.js?ver=16.6.3:17 Uncaught TypeError: Object(...) is not a function
    at n.value (editor.min.js:55)
    at n.value (editor.min.js:55)
    at Object.Fg (react-dom.min.js?ver=16.6.3:154)
    at Eg (react-dom.min.js?ver=16.6.3:13)
    at Hg (react-dom.min.js?ver=16.6.3:13)
    at ae (react-dom.min.js?ver=16.6.3:15)
    at Ig (react-dom.min.js?ver=16.6.3:155)
    at Hc (react-dom.min.js?ver=16.6.3:15)
    at Jc (react-dom.min.js?ver=16.6.3:16)
    at gh (react-dom.min.js?ver=16.6.3:39)

    I can see that other people have posted similar errors on these forums, but I wanted to ask my own question, to get help specific to my error.

    Thanks in advance for helping me to fix this issue with my WordPress.

Viewing 3 replies - 1 through 3 (of 3 total)

  • +1 – exact same error

    Client started experiencing this last week. I can’t replicate locally so I’m assuming it’s related to the hosting security (seems to be the issue similar posts)

    I’ve disabled wordfence and returned the root .htaccess back to default with no change.

    What else have you tried?

    EDIT: I’ve just disabled all my plugins and determined that Yoast SEO was causing the issue for me. I’m going to contact Yoast about this now.

    • This reply was modified 5 years, 8 months ago by lynxak.

    UPDATE: Yoast >v9.0.3 is causing the problem for me on wp 5.1.1. All other plugins disabled. Don’t have premiums yoast so going to see what happens in the next month or so with this, until then I’ll be sticking with Yoast SEO v9.0.2.

    I’m having the same error.

    I installed the latest version yesterday and today the editor started to crash after being working nicely, the only plugin installed at the moment is WordPress Importer :/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘“This block has encountered an error and cannot be previewed”’ is closed to new replies.