Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gutenberg crash when Jetpack is active on style preview #39694

Open
draganescu opened this issue Oct 9, 2024 · 9 comments · May be fixed by #39807
Open

Gutenberg crash when Jetpack is active on style preview #39694

draganescu opened this issue Oct 9, 2024 · 9 comments · May be fixed by #39807
Assignees
Labels
[Block] Story [Feature] Misc Blocks Other Jetpack blocks. [Focus] FSE Issues related to the site editor / Full Site Editing / FSE feature in Gutenberg Groundskeeping Worked on by Dotcom Groundskeeping [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] High [Status] In Progress [Status] Priority Review Triggered The guild in charge of triage has been notified of this issue in Slack Triaged [Type] Bug When a feature is broken and / or not performing as intended

Comments

@draganescu
Copy link

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
jetpack-maybe-bug.mp4

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
@draganescu draganescu added [Feature] Misc Blocks Other Jetpack blocks. [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Type] Bug When a feature is broken and / or not performing as intended Needs triage Ticket needs to be triaged labels Oct 9, 2024
@github-actions github-actions bot added [Status] Priority Review Triggered The guild in charge of triage has been notified of this issue in Slack [Pri] High labels Oct 9, 2024
@anomiex
Copy link
Contributor

anomiex commented Oct 9, 2024

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@7340783 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:

/**
* Removes the specific mounting point for this modal from the DOM.
*/
cleanDOM() {
parentElement.removeChild( this.node );
}

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
Copy link
Author

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

@jartes jartes added Triaged and removed Needs triage Ticket needs to be triaged labels Oct 10, 2024
@anomiex
Copy link
Contributor

anomiex commented Oct 10, 2024

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

@sejas
Copy link
Member

sejas commented Oct 10, 2024

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.

site-editor-media-tab-does-not-crash.webm

@sejas sejas added the Groundskeeping Worked on by Dotcom Groundskeeping label Oct 10, 2024
@sejas
Copy link
Member

sejas commented Oct 11, 2024

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

@donnapep
Copy link
Contributor

donnapep commented Oct 11, 2024

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

@supernovia
Copy link

📌 REPRODUCTION RESULTS

  • Tested on Atomic; couldn't duplicate
  • Tested on .org; couldn't duplicate

📌 ACTIONS

  • Marking as In Triage
  • Requested author feedback

📌 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?

@jeherve jeherve added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Oct 15, 2024
@draganescu
Copy link
Author

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
Copy link
Member

jeherve commented Oct 17, 2024

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.

#39804
#39805

@jeherve jeherve removed the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Oct 17, 2024
@jeherve jeherve added [Block] Story [Focus] FSE Issues related to the site editor / Full Site Editing / FSE feature in Gutenberg and removed [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Oct 17, 2024
@jeherve jeherve linked a pull request Oct 17, 2024 that will close this issue
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Story [Feature] Misc Blocks Other Jetpack blocks. [Focus] FSE Issues related to the site editor / Full Site Editing / FSE feature in Gutenberg Groundskeeping Worked on by Dotcom Groundskeeping [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Pri] High [Status] In Progress [Status] Priority Review Triggered The guild in charge of triage has been notified of this issue in Slack Triaged [Type] Bug When a feature is broken and / or not performing as intended
Projects
Development

Successfully merging a pull request may close this issue.

7 participants