WooCommerce Blocks: Adding the Cart block crashes the editor

[AtrumGeost]

Update from @JoshuaGoode

Please see internal notes p9F6qB-7LA-p2#comment-43978

Related
304-gh-Automattic/wpcomsh
#34655

Quick summary

When adding the WooCommerce Cart block I get this error:

TypeError: Cannot read properties of null (reading 'removeChild')
    at h.componentWillUnmount (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/amp/assets/js/amp-block-editor.js?ver=2ee98517d90b7670631d2afc67df7285:31:1273)
    at Rh (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:148:43)
    at Sh (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:151:394)
    at Qj (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:174:181)
    at unstable_runWithPriority (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react.min.755b0ae9.js:24:26)
    at Za (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:73:8)
    at eb (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:170:163)
    at gf (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:162:317)
    at https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react-dom.min.edd8b7a6.js:73:230
    at unstable_runWithPriority (https://woocrashcourse101463901178.wpcomstaging.com/wp-content/plugins/gutenberg/vendor/react.min.755b0ae9.js:24:26)

Steps to reproduce

1. On an AT Site install WooCommerce blocks: https://woocommerce.com/products/woocommerce-gutenberg-products-block/
2. Create a new page and add the WooCommerce Cart block
3. Notice the error

I confirmed this doesn't happen on a WordPress.org site (Jurassic Ninja)

What you expected to happen

For the editor to display the Cart block

What actually happened

Got this message:

The editor has encountered an unexpected error.

Screen.Recording.2021-10-28.at.12.39.46.mov

Console error:

Context

I encountered this while doing the WooCommerce Crash Course

Operating System

macOS

Browser

Google Chrome/Chromium

Simple, Atomic or both?

Atomic

Theme-specific issue?

No response

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

(WooCommerce Blocks are an experimental feature )

Available workarounds?

No response

Workaround details

No response

[Robertght]

Thank you for reporting this @AtrumGeost !

For me, it just freezes the entire editor/page.

[Robertght]

@pmcpinto should we move this one to https://github.com/Automattic/wc-calypso-bridge ?

[pmcpinto]

@pmcpinto should we move this one to https://github.com/Automattic/wc-calypso-bridge ?

Thanks for the ping. I think it makes more sense to transfer to the https://github.com/woocommerce/woocommerce-gutenberg-products-block repo. @nerrad what do you think?

[Gustavo-Hilario]

I'm taking the Woo Crash Course, and I'm also reproducing a similar issue while trying to add the Checkout block to one of my pages.

Unfortunately, the editor froze completely and I couldn't get a console report. I have tried clearing my Chrome cache, using an incognito window, and also using the WordPress.com desktop app, but the issue persists.

[nerrad]

It looks like this may be specific to the Atomic environment but ya it can be transferred to Woo Blocks repo.

[nerrad]

Although, there's also some possibility that it could be conflicting with something Calypso adds in the Atomic environment? Let's leave it here for now and I've asked @woocommerce/rubik-fp-squad to look into it.

[nerrad]

Just a quick update. Inserting the Cart block in the atomic environment is setting off an infinite loop of Block SSR requests which is what is triggering the breakage.

Requests are to this endpoint:

/wp-json/wp/v2/block-renderer/woocommerce/product-new?

block-renderer is the endpoint used by the ServerSideRender component. We're investigating why it only happens in Atomic and not on self-hosted (or even ephemeral).

[dpasque]

Tagging @Automattic/flow-patrol-create based on issue content

[nerrad]

So it looks like the differentiating factor here is this is reproducible in the iframed Block Editor (within the Calypso environment). I'm guessing that what's happening is the unique block structure of the Cart block (with different view contexts) somehow causes it to be mounted and unmounted multiple times which might be triggering the multiple requests from the ServerSideRendered component in the one view.