The editor and block has encountered an unexpected error and cannot be previewed

  • Hi,

    I’m experiencing an issue with WordPress on multiple layers but believe that the cause of the issues might be common, however still was not able to get to the bottom of it.

    Let me start with some background to the set up. Platform is build behind a corporate firewall with no direct internet access and use of Proxy for connectivity to certain domains. I use multiple plugins to expand engine capabilities and initially though that issues faced might be caused by some plugins clashing or bugged theme and have therefore configured a blank side with no modules/ themes installed just the black WordPress engine do discover that issues I came across are still present even on the blank instance.

    System info:

    Version
	5.7.2
Site Language
	en_US
User Language
	en_US
Permalink structure
	/%postname%/
Is this site using HTTPS?
	No
Can anyone register on this site?
	No
Default comment status
	Open
Is this a multisite?
	No
Communication with www.remarpro.com
	www.remarpro.com is reachable

    As to the issues:
    The most common one is experienced during page creation/edit process. When I add blocks and try to configure them using the right side “settings” panel, when I select “Advanced tab” I receive an error message “This block has encountered an issue and cannot be previewed. Same happens when I use the right hand “Settings” panel on the page level and click on “Page Attribute” option then I get “This editor has encountered and unexpected error”.

    In addition if I have some modules installed on the side some of the navigation buttons do not seem work as an example in Elementor Pro if I go to settings and try to navigate to “style” integrations”, advanced or experiments tab when I click on them nothing happens as if some scripts were not properly loaded.

    I had various thoughts as to what could potentially be an issue. I knew it is not WordPress directly or any software installed directly on it as when building demo site on differed infrastructure with full internet connectivity all of these worked fine, so i had number of potential causes for this:

    1. Proxy set up and some domains not whitelisted which prevent the site from downloading some libraries
    2. Files permission config on the infra blocking some of the site jobs
    3. Rest API issues caused by infra/corporate firewall
    4. Issues with WordPress Scheduler cause by infra setup
    5. Syntax Java issues caused by infra set up

    I have pretty much investigated all of the above without any luck and still not able to find the fix for the issues I’m facing.

    Below I will share some of the errors I was able to retrieve which troubleshooting issues with browser build in development tools:

    Gutenberg block issues:

    “`TypeError: ‘block’ member of ScrollIntoViewOptions ‘nearest’ is not a valid value for enumeration ScrollLogicalPosition.
    Stack trace:
    this.wp.components</xp</<@https://xxx.xx.x.xx/wp-includes/js/dist/components.min.js?ver=05cdf30cf2623cd4539a5c19832b0114:7:485600
    this.wp.components</lo/<@https://xxx.xx.x.xx/wp-includes/js/dist/components.min.js?ver=05cdf30cf2623cd4539a5c19832b0114:7:267339
    Bh@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:126:456
    Dj@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:162:476
    .Scheduler.unstable_runWithPriority@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25:260
    Da@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60:280
    xb@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:162:231
    Bj/<@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:162:138
    U@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:16:398
    B.port1.onmessage@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:24:129`

    or

    zi/<@https://xxx.xx.x.xx/wp-includes/js/dist/components.min.js?ver=05cdf30cf2623cd4539a5c19832b0114:7:309054
Bh@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:126:456
Dj@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:162:476
<strong>.Scheduler.unstable_runWithPriority</strong>@https://172.19.5.23/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25:260
Da@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60:280
xb@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:162:231
@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:236:102
Ei@https://xxx.xx.x.xx/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:41:59

    Elementor settings navigation

    jQuery.Deferred exception: elementorAdmin is not defined showLayout@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/beta-tester.min.js?ver=3.2.5:2:24490
onInit@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/beta-tester.min.js?ver=3.2.5:2:24356
Module/this.trigger@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/common-modules.min.js?ver=3.2.5:2:50854
ensureClosureMethods/</n[t]@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/common-modules.min.js?ver=3.2.5:2:49481
init@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/common-modules.min.js?ver=3.2.5:2:49642
Module@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/common-modules.min.js?ver=3.2.5:2:50937
child@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/common-modules.min.js?ver=3.2.5:2:51168
_createSuperInternal@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/beta-tester.min.js?ver=3.2.5:2:1059
BetaTesterModule@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/beta-tester.min.js?ver=3.2.5:2:24189
@https://xxx.xx.x.xx/wp-content/plugins/elementor/assets/js/beta-tester.min.js?ver=3.2.5:2:25223
l/</e@https://xxx.xx.x.xx/wp-admin/load-scripts.php?c=1&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=5.7.2:2:30003
l/</t<@https://xxx.xx.x.xx/wp-admin/load-scripts.php?c=1&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=5.7.2:2:30307
 undefined

    Any help or guidance would be much appreciated

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    JS errors from any cause will manifest all sorts of seemingly unrelated problems. Resolving JS errors will resolve the problems. The error messages for block editor related issues aren’t very helpful, but the cause is usually a custom block from a theme or plugin.

    Narrow down the source by deactivating all plugins and switching to twenty twentyone theme. The errors should go away. Restore the modules, one at a time, until the problem recurs.

    Thread Starter adamkolenda

    (@adamkolenda)

    Hi,

    I’ve thought of the same, however to eliminate potential plugin/theme clashes I have installed brand new blank WordPress instance – no plugins or customised themes but on the same environment and face Gutenberg block issues but only with “Advanced” tab.

    Thanks

    Moderator bcworkz

    (@bcworkz)

    Oh, you did mention that earlier. That apparently slipped my mind by the time I finished reading your OP ??

    If there were widespread issues with a fresh install, there’d be numerous reports. Your source files could be corrupted. Try a fresh install using a freshly downloaded .zip file from www.remarpro.com. If you have a /wp-content/mu-plugins/ folder and it contains PHP files, they could adversely affect behavior. Be sure none of your browser add-ons are altering script behavior.

    If none of those are the cause, the only variable left is your environment itself. Firewalls, proxies, or modSecurity can be the source of problems.

    Thread Starter adamkolenda

    (@adamkolenda)

    Thanks Bcworkz, that has been done already. we cleared the environment including customizations on PHP and apache, downloaded fresh WordPress package and the issues with Gutenberg Blocks still happen.

    As advised in the original post this is definitely something with the infra, however not really sure how to investigate it further.

    Are there any tools which could help to debug this issues or at least help to find the cause of the issue?

    Thanks

    Moderator bcworkz

    (@bcworkz)

    It’s usually best to let the original devs of the problematic code resolve the issue. Sadly that’s not always feasible.

    Your browser has a built-in script debugger in its developer tools (sources tab). I’ve not used it in ages, I don’t write much JS code, so I cannot confer any more detailed advice on using it. To allow its UI to be somewhat meaningful, all script minification needs to be disabled. Also, in wp-config.php, define SCRIPT_DEBUG and WP_DEBUG as true. Define CONCATENATE_SCRIPTS as false.

    Note that sometimes disabling minification and concatenation will resolve certain script errors. Following console error message links to the error location opens the related file in the sources tab. The line where the error occurs might not be the root cause of the error.

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