search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Gutenberg crash when Jetpack is active on style preview #39694

Closed draganescu closed 1 month ago

draganescu commented 1 month ago

Impacted plugin

Jetpack

Quick summary

When wanting to preview styles using the global styles functionality in Gutenberg, when Jetpack is active switching various tabs to see block categories results in Gutenberg crashing.

Steps to reproduce

  1. on latest WP 6.6.2
  2. Gutenberg Trunk
  3. install and activate Jetpack
  4. Go to jetpack settings and make sure Writing > Jetpack Blocks is enabled
  5. Now make sure to have a block theme active (I have TT4)
  6. Go to Appearance > Editor
  7. Click frame to edit
  8. Go to Global Styles in the upper right
  9. Click on the eye icon on the upper right
  10. You should see about 8 categories of blocks
  11. Click on those tabs, sequentially or randomly
  12. Do it until the editor crashes

https://github.com/user-attachments/assets/aa5ecc2b-c2dd-4efd-b50c-2a4e033fa4f4

A clear and concise description of what you expected to happen.

No crash.

What actually happened

Crash.

Impact

All

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

From console:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
    cleanDOM https://gutenberg.test/wp-content/plugins/jetpack/_inc/blocks/editor.js?minify=false&ver=79a817636478f16b45e2:83
    componentWillUnmount https://gutenberg.test/wp-content/plugins/jetpack/_inc/blocks/editor.js?minify=false&ver=79a817636478f16b45e2:83
    callComponentWillUnmountWithTimer https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:22901
    safelyCallComponentWillUnmount https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:22922
    commitDeletionEffectsOnFiber https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24178
    recursivelyTraverseDeletionEffects https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038
    commitDeletionEffectsOnFiber https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167

From editor "copy error"

cleanDOM@https://gutenberg.test/wp-content/plugins/jetpack/_inc/blocks/editor.js?minify=false&ver=79a817636478f16b45e2:83:13733
componentWillUnmount@https://gutenberg.test/wp-content/plugins/jetpack/_inc/blocks/editor.js?minify=false&ver=79a817636478f16b45e2:83:13517
callComponentWillUnmountWithTimer@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:22901:18
safelyCallComponentWillUnmount@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:22922:40
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24178:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24067:47
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24182:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24182:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24182:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24067:47
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24167:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24067:47
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
commitDeletionEffectsOnFiber@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24219:45
recursivelyTraverseDeletionEffects@https://gutenberg.test/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:24038:35
anomiex commented 1 month ago

I was unable to reproduce this following the instructions with a fresh JN site (which has WordPress 6.6.2) and Jetpack 13.9.

Gutenberg Trunk

I did npm run build:plugin-zip with wordpress/gutenberg@7340783694bdeaa8c4c73030b7a05c83cdcffa44 checked out to get a trunk build.

I note in the trace provided that the function reported is cleanDOM(), the only instance of which in the Jetpack monorepo appears to be in the Story block: https://github.com/Automattic/jetpack/blob/7ddcd05cc8fae08aeb0561ad025cbedc06f49711/projects/plugins/jetpack/extensions/blocks/story/player/modal/index.js#L68-L73

The Story block appears on the Media tab, and both the crashes shown in the video happen when leaving the Media tab for the Widgets tab.

draganescu commented 1 month ago

For the record, I had one other developer repro this before posting the bug 🤷🏻

anomiex commented 1 month ago

I'd be happy to look deeper if I could reproduce. 🤷

sejas commented 1 month ago

I couldn't reproduce it. I followed the testing steps in a Jetpack site with Gutenberg 19.4.0 and Jetpack 13.9, as shown in the description of this issue. And also in WPcom atomic site. I could access the all the tabs including the Media tab in both sites without any issues.

https://github.com/user-attachments/assets/4fac1993-e09f-4162-8b73-2cbb4e191efb

sejas commented 1 month ago

@draganescu, are you still experiencing the issue? Are there any additional steps I need to take to reproduce it?

donnapep commented 1 month ago

Moving this back to "Needs Triage" as it's not been reproducible so far.

supernovia commented 1 month ago

📌 REPRODUCTION RESULTS

📌 ACTIONS

📌 Message to Author @draganescu I can't seem to replicate this either. Are there any other plugins potentially involved, or can you share any further details that might help us replicate this?

draganescu commented 1 month ago

OK I've retested this on another machine with the same setup WP 6.6.2 + Jetpack 13.9.1 + Gutenberg trunk dev build and I could not repro either.

But I can consistently repro on my machine, and one other team mate reproduced.

I tracked the difference between the machine I couldn't repro on and the ones I can repro on to be that Jetpack is in Offline Mode

(some features are disabled) because: Your site URL is a known local development environment URL

Indeed, the machine I cannot repor on has a normal public URL, while me and my colleague have local URLs. Maybe that's a thing to look on?

Otherwise if this is still not a key to repro feel free to close 🙇🏻

jeherve commented 1 month ago

I was able to reproduce:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node

The above error occurred in the <Modal> component:

Zg@http://localhost/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:217152
Zg@http://localhost/wp-content/plugins/gutenberg/build/vendors/react-dom.js?ver=18:1:217854
ExpandableSandbox@http://localhost/wp-content/plugins/jetpack/_inc/blocks/editor-beta.js?minify=false&ver=f3e463dd15d69dcf859c:74666:27
StoryPlayer@http://localhost/wp-content/plugins/jetpack/_inc/blocks/editor-beta.js?minify=false&ver=f3e463dd15d69dcf859c:74771:21
div
StoryEdit@http://localhost/wp-content/plugins/jetpack/_inc/blocks/editor-beta.js?minify=false&ver=f3e463dd15d69dcf859c:73921:151

There are also a few other warnings thrown on that view, that we'll need to fix.

https://github.com/Automattic/jetpack/issues/39804 https://github.com/Automattic/jetpack/issues/39805