undefined crashes live codeblock

[isaacbrodsky]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The live codeblock crashes the entire page on inputs that cause React to try to render undefined.

I can work around this by changing transformCode to have an || null in case the code returns undefined.

Reproducible demo

No response

Steps to reproduce

• Open https://docusaurus.io/docs/next/markdown-features/code-blocks#interactive-code-editor
• Replace the text in one of the live code blocks with the text undefined
  Edit: Also happens if you replace the live codeblock text with JSON

Expected behavior

The entire page does not crash and the code block renders an error instead.

Actual behavior

The entire page (not just the code block) crashes with the error message Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=n for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Your environment

• Public source code:
• Public site URL: https://docusaurus.io/docs/next/markdown-features/code-blocks#interactive-code-editor
• Docusaurus version used: latest on website and 2.0.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

👍 Couldn't repro on react-live playground: https://react-live.netlify.app/

So this must be a Docusaurus bug 🤷‍♂️

[rashidmya]

can I try doing this?

[thelovekesh]

@rashidmya Can I take this? I have PR ready for this.

[Josh-Cena]

@rashidmya sure, no need to ask.

In the worst case we just need to add an error boundary. We already have such a component in core.

[rashidmya]

@thelovekesh i'd like to take a shot at this if thats okay

[thelovekesh]

@rashidmya Ya sure. Since I have looked into this so here are some findings that can help you:

• Issue is coming from react-live rendering without valid element verification. (See fix #283: Verify valid element before rendering FormidableLabs/react-live#288)
• I am not sure but I think updating react-live to the latest version fixes the issue. If it's causing any issue with backward compatibility then you should explore the error boundary component mentioned by @Josh-Cena

[Josh-Cena]

I believe we had compatibility issues in the past and ended up pinning the react-live version. I think for now we can simply add an error boundary to display the error gracefully.