Import files to `theme-live-codeblock` scope

🐛 Bug Report

Import statements in theme-live-codeblock not working. I read the react-live docs and it does look like they do support importing modules - does docusaurus expose the needed scope?

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Configure theme-live-codeblock according to these instructions
2. Install @material-ui/core
3. Create file.mdx attempt to import components from @material-ui/core
4. Attempted to import within .mdx file as well as the ``` jsx live block

Expected behavior

Render the imported component

Actual Behavior

• When the import statement is at the top of .mdx (keep in mind I can use the imported component within the .mdx file just fine, just can’t use it within the ```jsx live block…):

• When the import statement is inside the ```jsx live block:

Your Environment

• Docusaurus version used: 2.0.0-alpha.55
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node: v13.12.0, Firefox: 76.0.1
• Operating system and version (desktop or mobile): Catalina 10.15.4

// from package.json
"dependencies": {
  "@docusaurus/core": "^2.0.0-alpha.55",
  "@docusaurus/preset-classic": "^2.0.0-alpha.55",
  "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
  "@material-ui/core": "^4.10.0",
  "@material-ui/icons": "^4.9.1",
  "classnames": "^2.2.6",
},

Reproducible Demo

• Demo 1
• Demo 2
• .mdx file

[oze4]

Yes sir. Thank you!

[slorber]

@oze4 I’ve made a PR to support more officially a workflow to provide some components to the react-live scope. It’s not as good as the gatsby integration as I hoped (as you have to configure available scope globally) but I think it’s good enough.

Can you tell me if this solves your usecase?

I think it would permit you to swizzle a “smaller” part of the live editor plugin

https://github.com/facebook/docusaurus/pull/2826