Support » Fixing WordPress » WP 5.8 upgrade: Gutenberg insert block error with Yoast

WP 5.8 upgrade: Gutenberg insert block error with Yoast

  • Resolved drsdre

    (@drsdre)


    3 weeks, 4 days ago

    Ever since our site has been upgraded to WordPress 5.8, it has become impossible to add new blocks when Ylatest oast SEO 16.7 plugin is enabled. The editor fails on a white screen with the message ‘The editor has encountered an unexpected error.’ and the following error:

    TypeError: Cannot destructure property 'categories' of 'Object(...)(...)' as it is undefined.
at Al (https://mysite.com/wp-includes/js/dist/block-editor.min.js?ver=390a9f83b606a55e8b523c4d16bdb08c:12:182310)
at xa (https://mysite.com/wp-includes/js/dist/block-editor.min.js?ver=390a9f83b606a55e8b523c4d16bdb08c:12:219203)
at we (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:84:293)
at zj (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:226:496)
at Th (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:152:223)
at tj (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:152:152)
at Te (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:146:151)
at https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:61:68
at unstable_runWithPriority (https://mysite.com/wp-includes/js/dist/vendor/react.min.js?ver=16.13.1:25:260)
at Da (https://mysite.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.13.1:60:280)

    Recovery does work.

    As soon as the Yoast SEO plugin is disabled, the error is gone. Yoast support cannot replicate and help (https://github.com/Yoast/wordpress-seo/issues/17267). When all plugins are disabled and basic Twentytwenty theme and only Yoast plugin enabled, it shows the same behaviour.

    In the Chrome browser console the following errors are shown after clicking the + buttons to add a block:

    data.js?ver=7bfa3a673439e85e459d5ec92d30fdda:3351 An error occurred while running 'mapSelect': Cannot read property 'map' of undefined
useSelect @ data.js?ver=7bfa3a673439e85e459d5ec92d30fdda:3351
useBlockTypesState @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:18698
BlockTypesTab @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:22475
renderWithHooks @ react-dom.js?ver=16.13.1:14938
mountIndeterminateComponent @ react-dom.js?ver=16.13.1:17617
beginWork @ react-dom.js?ver=16.13.1:18731
beginWork$1 @ react-dom.js?ver=16.13.1:23314
performUnitOfWork @ react-dom.js?ver=16.13.1:22292
workLoopSync @ react-dom.js?ver=16.13.1:22265
performSyncWorkOnRoot @ react-dom.js?ver=16.13.1:21891
(anonymous) @ react-dom.js?ver=16.13.1:11224
unstable_runWithPriority @ react.js?ver=16.13.1:2685
runWithPriority$1 @ react-dom.js?ver=16.13.1:11174
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.13.1:11219
flushSyncCallbackQueue @ react-dom.js?ver=16.13.1:11207
discreteUpdates$1 @ react-dom.js?ver=16.13.1:22028
discreteUpdates @ react-dom.js?ver=16.13.1:803
dispatchDiscreteEvent @ react-dom.js?ver=16.13.1:4291
data.js?ver=7bfa3a673439e85e459d5ec92d30fdda:3351 An error occurred while running 'mapSelect': Cannot read property 'map' of undefined
useSelect @ data.js?ver=7bfa3a673439e85e459d5ec92d30fdda:3351
useBlockTypesState @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:18698
BlockTypesTab @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:22475
renderWithHooks @ react-dom.js?ver=16.13.1:14938
mountIndeterminateComponent @ react-dom.js?ver=16.13.1:17617
beginWork @ react-dom.js?ver=16.13.1:18731
callCallback @ react-dom.js?ver=16.13.1:182
invokeGuardedCallbackDev @ react-dom.js?ver=16.13.1:231
invokeGuardedCallback @ react-dom.js?ver=16.13.1:286
beginWork$1 @ react-dom.js?ver=16.13.1:23338
performUnitOfWork @ react-dom.js?ver=16.13.1:22292
workLoopSync @ react-dom.js?ver=16.13.1:22265
performSyncWorkOnRoot @ react-dom.js?ver=16.13.1:21891
(anonymous) @ react-dom.js?ver=16.13.1:11224
unstable_runWithPriority @ react.js?ver=16.13.1:2685
runWithPriority$1 @ react-dom.js?ver=16.13.1:11174
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.13.1:11219
flushSyncCallbackQueue @ react-dom.js?ver=16.13.1:11207
discreteUpdates$1 @ react-dom.js?ver=16.13.1:22028
discreteUpdates @ react-dom.js?ver=16.13.1:803
dispatchDiscreteEvent @ react-dom.js?ver=16.13.1:4291
block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:18695 Uncaught TypeError: Cannot destructure property 'categories' of 'Object(...)(...)' as it is undefined.
    at useBlockTypesState (block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:18695)
    at BlockTypesTab (block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:22475)
    at renderWithHooks (react-dom.js?ver=16.13.1:14938)
    at mountIndeterminateComponent (react-dom.js?ver=16.13.1:17617)
    at beginWork (react-dom.js?ver=16.13.1:18731)
    at HTMLUnknownElement.callCallback (react-dom.js?ver=16.13.1:182)
    at Object.invokeGuardedCallbackDev (react-dom.js?ver=16.13.1:231)
    at invokeGuardedCallback (react-dom.js?ver=16.13.1:286)
    at beginWork$1 (react-dom.js?ver=16.13.1:23338)
    at performUnitOfWork (react-dom.js?ver=16.13.1:22292)
useBlockTypesState @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:18695
BlockTypesTab @ block-editor.js?ver=390a9f83b606a55e8b523c4d16bdb08c:22475
renderWithHooks @ react-dom.js?ver=16.13.1:14938
mountIndeterminateComponent @ react-dom.js?ver=16.13.1:17617
beginWork @ react-dom.js?ver=16.13.1:18731
callCallback @ react-dom.js?ver=16.13.1:182
invokeGuardedCallbackDev @ react-dom.js?ver=16.13.1:231
invokeGuardedCallback @ react-dom.js?ver=16.13.1:286
beginWork$1 @ react-dom.js?ver=16.13.1:23338
performUnitOfWork @ react-dom.js?ver=16.13.1:22292
workLoopSync @ react-dom.js?ver=16.13.1:22265
performSyncWorkOnRoot @ react-dom.js?ver=16.13.1:21891
(anonymous) @ react-dom.js?ver=16.13.1:11224
unstable_runWithPriority @ react.js?ver=16.13.1:2685
runWithPriority$1 @ react-dom.js?ver=16.13.1:11174
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.13.1:11219
flushSyncCallbackQueue @ react-dom.js?ver=16.13.1:11207
discreteUpdates$1 @ react-dom.js?ver=16.13.1:22028
discreteUpdates @ react-dom.js?ver=16.13.1:803
dispatchDiscreteEvent @ react-dom.js?ver=16.13.1:4291
react-dom.js?ver=16.13.1:19662 The above error occurred in the <BlockTypesTab> component:
    in BlockTypesTab (created by InserterMenu)
    in div (created by InserterMenu)
    in div (created by TabPanel)
    in div (created by TabPanel)
    in TabPanel (created by InserterTabs)
    in InserterTabs (created by InserterMenu)
    in div (created by InserterMenu)
    in div (created by InserterMenu)
    in div (created by InserterMenu)
    in InserterMenu (created by InserterLibrary)
    in InserterLibrary (created by InserterSidebar)
    in div (created by InserterSidebar)
    in div (created by InserterSidebar)
    in InserterSidebar (created by Layout)
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in div (created by ForwardRef(InterfaceSkeleton))
    in ForwardRef(InterfaceSkeleton) (created by Layout)
    in Layout (created by Editor)
    in error_boundary_ErrorBoundary (created by Editor)
    in BlockRefsProvider (created by BlockEditorProvider)
    in BlockEditorProvider
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(BlockEditorProvider) (created by EditorProvider)
    in BlockContextProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EditorProvider
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(EditorProvider) (created by Editor)
    in slot_fill_provider_SlotFillProvider (created by Provider)
    in provider_SlotFillProvider (created by Provider)
    in Provider (created by Editor)
    in StrictMode (created by Editor)
    in Editor

    I have tried debugging the Gutenberg React code using define( ‘SCRIPT_DEBUG’, true );. I’m stuck in the execution of BlockTypesTab() => useBlockTypesState() => useSelect() => mapSelect() why registry.select is returning undefined.

    Any help is appreciated.

    Andre

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steve Stern (sterndata)

    (@sterndata)

    Forum Moderator & Support Team Volunteer

    3 weeks, 4 days ago

    I recommend asking at https://wordpress.org/support/plugin/wordpress-seo/#new-post so the plugin’s developers and support community can help you with this.

    Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    🏳️‍🌈 Plugin Review Team Rep

    3 weeks, 3 days ago

    Have you already tried a full reinstall of the WordPress core files? You may have something corrupted.

    Thread Starter drsdre

    (@drsdre)

    3 weeks, 3 days ago

    Reinstall from Update -> Re-install version 5.8-en_GB did not help.

    I’m wondering if there is something in the DB options left over that is breaking the block loading.

    The blocks API is working correctly with valid JSON response:
    https://mysite.com/wp-json/wp/v2/blocks?context=edit&per_page=100&_locale=user

    In the console I’m also seeing error messages from the Gutenberg validation even on an empty page:
    react_devtools_backend.js:2574 Block validation: Block validation failed for core/image ({name: "core/image", icon: {…}, keywords: Array(3), providesContext: {…}, usesContext: Array(0), …}).

    Content generated by save function:

    <figure class="wp-block-image alignleft is-resized"><img src="" alt="" width="75" height="75" /></figure>

    Content retrieved from post body:

    <div class="wp-block-image"><figure class="alignleft size-large is-resized"><img src="" alt="" width="75" height="75" /></figure></div>

    • This reply was modified 3 weeks, 3 days ago by drsdre.
    • This reply was modified 3 weeks, 3 days ago by Jan Dembowski. Reason: Formatting
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    3 weeks, 3 days ago

    This is still the best advice. 😀

    I recommend asking at https://wordpress.org/support/plugin/wordpress-seo/#new-post so the plugin’s developers and support community can help you with this.

    Thread Starter drsdre

    (@drsdre)

    3 weeks, 2 days ago

    After deep diving further I found an error condition in the Yoast structured-data-blocks-1670.js component. See https://wordpress.org/support/topic/wp-5-8-upgrade-gutenberg-insert-block-error-with-yoast-2/#post-14698368

    Recommendations:
    Instead of try-catch’ing error conditions in Gutenberg useSelect function, giving not enough info back on the actual cause of the issue and then having the calling function fail in the end, either remove the try-catch or improve error messaging.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.

Views