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.