Post Preview: Native preview crashes the editor (intermittent)

[worldomonation]

Quick summary

The native Gutenberg preview can crash the editor under certain circumstances.

Steps to reproduce

1. start a new post.
2. add title.
3. press tab to move to the body of the post.
4. click on Preview button.
5. click on Mobile or Tablet.
6. click on Desktop.

What you expected to happen

The live preview shown in the Gutenberg editor should revert to the Desktop size, which occupies the full width of the editor.

What actually happened

The editor crashes with the error: The editor has encountered an unexpected error.

Screen.Recording.2021-10-18.at.2.45.26.PM.mov

Screen.Recording.2021-10-18.at.2.33.05.PM.mov

Context

#57014

Browser

Mozilla Firefox, Microsoft Edge

Simple/Atomic

Simple, Atomic

Other notes

Console error:

TypeError: Cannot read properties of null (reading 'removeEventListener')
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/build/components/index.min.js?m=1634147048h&ver=325888c3acfb32b2d545dfa09574a666:1:271633
    at cf (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:7:34620)
    at Qj (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:8:8342)
    at unstable_runWithPriority (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react.min.755b0ae9.js?m=1624062436h:5:3609)
    at Za (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:6:12302)
    at eb (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:8:6339)
    at gf (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:8:2335)
    at https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:6:12524
    at unstable_runWithPriority (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react.min.755b0ae9.js?m=1624062436h:5:3609)
    at Za (https://s0.wp.com/wp-content/plugins/gutenberg-core/v11.7.0/vendor/react-dom.min.edd8b7a6.js?m=1624062436h:6:12302)

Post text:

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>lwuroiweuoirweoiruwoer</p><cite>ljwelkjrlwker</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, easy to implement

Workaround details

No response

[worldomonation]

#56980 introduced the native preview.

[chad1008]

I'm also able to reproduce on a vanilla install locally. It looks like it was introduced when Gutenberg first started iframing mobile/tablet previews.

So it's likely this has been the core plugin for a few months, and just landed on wpcom recently when we switched over to the native preview.

I've opened an issue in the core plugin repo: WordPress/gutenberg#35807

On the WPCOM side, this conversation is related to the overall switch to native previews: p58i-bmT-p2

[worldomonation]

Checked that this no longer occurs after upstream issue has been fixed.