Rendering MDX at runtime using Snowpack fails

[martonlanga]

Cross-posting from FredKSchott/snowpack#1674, not sure if this is Snowpack related

Trying to render the MDX from @mdx-js/runtime results in the following error (just importing it doesn't break it):

Uncaught TypeError: (0 , _index.default) is not a function
    at NodePath.traverse (runtime.js:210735)
    at Scope.crawl (runtime.js:193475)
    at Scope.init (runtime.js:193443)
    at NodePath.setScope (runtime.js:209597)
    at NodePath.setContext (runtime.js:209613)
    at new File (runtime.js:227321)
    at normalizeFile (runtime.js:231196)
    at normalizeFile.next (<anonymous>)
    at run (runtime.js:234629)
    at run.next (<anonymous>)

Here's the example from the MDX documentation I'm trying to implement.

Note that there is a snowpack-mdx plugin, but that's for generating components from .md & .mdx and I'm trying to render .mdx during runtime.

Things I've tried

• At first I was getting node-polyfill errors, but enabling polyfillNode solved those issues
• Created a blank snowpack-react app, added only @mdx-js/runtime and got the same error
• Did the same using create-react-app and it works

Link to the @mdx-js/runtime package

[ChristianMurphy]

@martonlanga could you share a gist or a github repo with a complete example of the issue you are seeing?

[martonlanga]

Tried @mdx-js/runtime with Parcel, getting the following error:

index-browser.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined
    at Object.parcelRequire.../node_modules/remark-mdx/node_modules/@babel/core/lib/config/files/index-browser.js (index-browser.js:1)
    at newRequire (src.e31bb0bc.js:47)
    at localRequire (src.e31bb0bc.js:53)
    at Object.parcelRequire.../node_modules/remark-mdx/node_modules/@babel/core/lib/index.js../transformation/file/file (index.js:181)
    at newRequire (src.e31bb0bc.js:47)
    at localRequire (src.e31bb0bc.js:53)
    at Object.parcelRequire.../node_modules/remark-mdx/extract-imports-and-exports.js.@babel/core (extract-imports-and-exports.js:1)
    at newRequire (src.e31bb0bc.js:47)
    at localRequire (src.e31bb0bc.js:53)
    at Object.parcelRequire.../node_modules/remark-mdx/index.js.is-alphabetical (index.js:3)

[martonlanga]

• Tried porting the mdx lib to ES modules and including it in the Snowpack as, but getting the same not a function error
• Using Snowpack's babel plugin didn't help either
• Runtime in a Next.js app works

Also thought about running transform in Electron's main process (I have a separate webpack bundler for this part) and sending the result as a string to the fronted. But this seems unnecessarily complex. I would have to include React and my components both in the Electron and Snowpack part of my app.

Then I came across markdown-to-jsx, which seems to work. Read your comparison of the two and missing out on transformers is fine for now I guess. Also saw you mentioned the work being done on micromark. Do you think mdx using micromark might fix this issue in the future?

Thanks for your time @ChristianMurphy - and sorry for bugging you so much!

[ChristianMurphy]

index-browser.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined
   at Object.parcelRequire.../node_modules/remark-mdx/node_modules/@babel/core/lib/config/files/index-browser.js (index-browser.js:1)
   at newRequire (src.e31bb0bc.js:47)
   at localRequire (src.e31bb0bc.js:53)
   at Object.parcelRequire.../node_modules/remark-mdx/node_modules/@babel/core/lib/index.js../transformation/file/file (index.js:181)
   at newRequire (src.e31bb0bc.js:47)
   at localRequire (src.e31bb0bc.js:53)
   at Object.parcelRequire.../node_modules/remark-mdx/extract-imports-and-exports.js.@babel/core (extract-imports-and-exports.js:1)
   at newRequire (src.e31bb0bc.js:47)
   at localRequire (src.e31bb0bc.js:53)
   at Object.parcelRequire.../node_modules/remark-mdx/index.js.is-alphabetical (index.js:3)

https://unpkg.com/[email protected]/index.js doesn't include regenerator runtime,
it sounds like https://babeljs.io/docs/en/babel-runtime is coming into the mix somehow 🤔

• Tried porting the mdx lib to ES modules and including it in the Snowpack as, but getting the same not a function error
• Using Snowpack's babel plugin didn't help either
• Runtime in a Next.js app works

🤔 strange, that make it sound like something may be interfering with snowpack's package resolver directly 🤔

Do you think mdx using micromark might fix this issue in the future?

It may, I know @wooorm as been considering the possibility of removing babel as a dependency/peer-dependency of the project.
There's also the possibility it's an issue in snowpack's package resolver, which may get resolved there, and unblock usage here.

[wooorm]

This much more sounds like a crash with the things snowpack is doing, rather than what we’re doing. It also might be a “working as intended” for them: eval is dangerous.

I don’t think it has to do with how MDX is parsed, so it’s unrelated to micromark/remark. But, for micromark: import/export/jsx is still supported in the MDX format (for the JSX specifically I mean: # Hello {<Icon />}), so you’ll have to transform it with something.
What I plan on working on is outputting JS instead of JSX from @mdx-js/mdx. Which might save one compile.

Comparing markdown-to-jsx to MDX is somewhat like apples and oranges. Why do you want to use JSX / MD / MDX?

[martonlanga]

There's also the possibility it's an issue in snowpack's package resolver, which may get resolved there, and unblock usage here.
This much more sounds like a crash with the things snowpack is doing, rather than what we’re doing. It also might be a “working as intended” for them: eval is dangerous.

I'll try to reach out to someone at Snowpack to find out whether this not working, is a bug or a feature. Will update!

What I plan on working on is outputting JS instead of JSX from @mdx-js/mdx. Which might save one compile.

That sounds interesting. I'm watching the releases so gonna give that a try.

Why do you want to use JSX / MD / MDX?

@wooorm I'm creating an Electron app that lets users run commands and converts stdout to JSX. So essentially want to give CLIs the ability to output MDX. I know there's https://mdxjs.com/guides/terminal, which is pretty cool but what if I want to display cat gifs haha