search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.02k stars 4.03k forks source link

Unexpected Error in Site Editor [Cannot read properties of undefined (reading 'id')] #62834

Closed DhrRob closed 2 weeks ago

DhrRob commented 2 weeks ago

Description

This happens in 6.6-beta4, reverted to 6.5.5 on the same site, same settings, error was vanished.

When I open the site editor (http://localhost:8881/wp-admin/site-editor.php) the Editor has ran into an unexpected error. Seems to be related to post.id missing as it refers to this line in editor.js:21230 ( }, [shouldRenderTemplate, post.id, post.type, rootLevelPost.type, rootLevelPost.slug]); ).

Whenever I use the Site Editor from a page (e.g. http://localhost:8881/wp-admin/site-editor.php?postType=wp_template&postId=vb-theme//page&canvas=edit) I don't get any errors, presumely because postId is present.

Hope that is a clear description! I don't submit bugs/errors often. I haven't tried switching themes, but did disable all plugins.

Step-by-step reproduction instructions

  1. From WP Dashboard, navigate to "Appearance" and click "Editor".

Screenshots, screen recording, code snippet

Copied error from the modal (The editor has encountered an unexpected error):

TypeError: Cannot read properties of undefined (reading 'id')
    at http://localhost:8881/wp-includes/js/dist/editor.js?ver=5f2f829b373e9ce08d8a:21230:34
    at renderWithHooks (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:15486:18)
    at mountIndeterminateComponent (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:20098:13)
    at beginWork (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:21621:16)
    at beginWork$1 (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:27460:14)
    at performUnitOfWork (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:26591:12)
    at workLoopSync (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:26500:5)
    at renderRootSync (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:26468:7)
    at recoverFromConcurrentError (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:25884:20)
    at performConcurrentWorkOnRoot (webpack://WordPress/./node_modules/react-dom/cjs/react-dom.development.js?:25784:22)

Full console log from page load:

site-editor.php:1  An import map is added after module script load was triggered.
site-editor.php:1  Uncaught TypeError: Failed to resolve module specifier "@wordpress/interactivity". Relative references must start with either "/", "./", or "../".
edit-site.js?ver=6e98497149a640c54d1a:40479  Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
createRoot$1 @ react-dom.development.js:29846
initializeEditor @ edit-site.js?ver=6e98497149a640c54d1a:40479
(anonymous) @ site-editor.php:2378
Show 3 more frames
Show less
blocks.js?ver=5d25b2f58ce3eb86c829:7127  Block "core/strofe" is not registered.
unregisterBlockType @ blocks.js?ver=5d25b2f58ce3eb86c829:7127
(anonymous) @ unregister-blocks.js?ver=1719317737:33
(anonymous) @ unregister-blocks.js?ver=1719317737:32
editor.js?ver=5f2f829b373e9ce08d8a:21230  Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at editor.js?ver=5f2f829b373e9ce08d8a:21230:34
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20098:13)
    at beginWork (react-dom.development.js:21621:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27485:7)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)
(anonymous) @ editor.js?ver=5f2f829b373e9ce08d8a:21230
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20098
beginWork @ react-dom.development.js:21621
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27485
performUnitOfWork @ react-dom.development.js:26591
workLoopSync @ react-dom.development.js:26500
renderRootSync @ react-dom.development.js:26468
performConcurrentWorkOnRoot @ react-dom.development.js:25772
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 14 more frames
Show less
editor.js?ver=5f2f829b373e9ce08d8a:21230  Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at editor.js?ver=5f2f829b373e9ce08d8a:21230:34
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20098:13)
    at beginWork (react-dom.development.js:21621:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27485:7)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)
(anonymous) @ editor.js?ver=5f2f829b373e9ce08d8a:21230
renderWithHooks @ react-dom.development.js:15486
mountIndeterminateComponent @ react-dom.development.js:20098
beginWork @ react-dom.development.js:21621
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27485
performUnitOfWork @ react-dom.development.js:26591
workLoopSync @ react-dom.development.js:26500
renderRootSync @ react-dom.development.js:26468
recoverFromConcurrentError @ react-dom.development.js:25884
performConcurrentWorkOnRoot @ react-dom.development.js:25784
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less
react-dom.development.js:18704  The above error occurred in one of your React components:

    at http://localhost:8881/wp-includes/js/dist/editor.js?ver=5f2f829b373e9ce08d8a:21210:3
    at http://localhost:8881/wp-includes/js/dist/editor.js?ver=5f2f829b373e9ce08d8a:18747:3
    at Editor (http://localhost:8881/wp-includes/js/dist/editor.js?ver=5f2f829b373e9ce08d8a:27596:3)
    at EditSiteEditor (http://localhost:8881/wp-includes/js/dist/edit-site.js?ver=6e98497149a640c54d1a:24297:3)
    at div
    at div
    at MotionComponent (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:16357:46)
    at Resizable (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:65362:28)
    at UnforwardedResizableBox (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:66407:3)
    at ResizableFrame (http://localhost:8881/wp-includes/js/dist/edit-site.js?ver=6e98497149a640c54d1a:9753:3)
    at ErrorBoundary (http://localhost:8881/wp-includes/js/dist/edit-site.js?ver=6e98497149a640c54d1a:9268:5)
    at div
    at div
    at div
    at div
    at Layout (http://localhost:8881/wp-includes/js/dist/edit-site.js?ver=6e98497149a640c54d1a:40193:3)
    at RouterProvider (http://localhost:8881/wp-includes/js/dist/router.js?ver=bce4a12305810093635e:937:3)
    at GlobalStylesProvider (http://localhost:8881/wp-includes/js/dist/editor.js?ver=5f2f829b373e9ce08d8a:19267:3)
    at SlotFillProvider (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:33743:3)
    at provider_SlotFillProvider (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:33841:3)
    at Provider (http://localhost:8881/wp-includes/js/dist/components.js?ver=126527c957696b447a10:33905:3)
    at App (http://localhost:8881/wp-includes/js/dist/edit-site.js?ver=6e98497149a640c54d1a:40377:55)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js:18704
callback @ react-dom.development.js:18767
callCallback @ react-dom.development.js:15036
commitUpdateQueue @ react-dom.development.js:15057
commitLayoutEffectOnFiber @ react-dom.development.js:23398
commitLayoutMountEffects_complete @ react-dom.development.js:24722
commitLayoutEffects_begin @ react-dom.development.js:24708
commitLayoutEffects @ react-dom.development.js:24646
commitRootImpl @ react-dom.development.js:26857
commitRoot @ react-dom.development.js:26716
finishConcurrentRender @ react-dom.development.js:25926
performConcurrentWorkOnRoot @ react-dom.development.js:25843
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

youknowriad commented 2 weeks ago

In the code base I can see a difference between 6.6 and trunk. In 6.6 we don't avoid rendering the ExperimentalEditorProvider component if the post prop is not loaded yet. But in think, we do have a protection so this bug is most likely fixed in trunk but not in 6.6

That said, I'm not able to reproduce yet in the 6.6 branch. Some extra information might be needed: do you have a static page as a front page, which theme are you using...

DhrRob commented 2 weeks ago

That said, I'm not able to reproduce yet in the 6.6 branch. Some extra information might be needed: do you have a static page as a front page, which theme are you using... I am using a custom made theme, based off the fullsiteediting.com block theme generator.

I indeed have a static page as front page. Templates present in my parent and/or child theme are:

youknowriad commented 2 weeks ago

Ok I'm able to reproduce. You need to have a theme with a "front-page.html" template and set a static page as home page.