How to import an mdx file that's at a remote location like S3/Cloudfront URL?

[aakanshaverma11]

I want to import the mdx files from a remote location(S3 bucket/Cloudfront URL in my case) but don't know how this import syntax will support a https url import Content from '!@mdx-js/loader!./../../markdown/markdown-features.mdx';
We are creating a new React app, and we need to support a few pages from a remote location. I created the app through CRA, and I just simply want to render the mdx file(from s3) on my app.

[xHomu]

Use MDX remote https://github.com/hashicorp/next-mdx-remote

[aakanshaverma11]

I did not create a package using next.js. Will it work for CRA package ? Also, is it mandatory to pass the components ? Actually these files will be generated by a partner team, and I have to just render them in my app.

[xHomu]

Your app would be doing everything client-side?

[aakanshaverma11]

yes

[xHomu]

If you're on next, try mdx-next-remote https://github.com/hashicorp/next-mdx-remote

Otherwise, try mdx-bundle https://github.com/kentcdodds/mdx-bundler

If you need everything done client-side, you can use evaluate or evaluateSync. https://mdxjs.com/packages/mdx/#evaluatesyncfile-options

The minimum code would be something like

import {evaluateSync} from '@mdx-js/evaluate'
import * as runtime from 'react/jsx-runtime'

//const mdxString is fetched from your remote somehow

const {default: Content} = await evaluateSync(mdxString, {...runtime, useDynamicImport: true});

return <Content />

[aakanshaverma11]

Nice, thanks @homumado for sharing. Looks like evaluteSync works if the React component's code(definition) is within the the .mdx file but not if we are trying to import the reusable components in the .mdx file.

[xHomu]

adding the useDynamicImport: true, prop might fix that. https://mdxjs.com/packages/mdx/#optionsusedynamicimport

[aakanshaverma11]

@homumado Do you have a working example or a snippet ? I am getting errors on setting useDynamicImport as true.

[aakanshaverma11]

ERROR: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

doc.mdx
`# Markdown Features

import { App } from "/latest/index.esm.js";

`

Getting error on this await :
(function anonymous( ) { /*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {App} = await import("https://abc.com/latest/index.esm.js");

[ChristianMurphy]

@aakanshaverma11 there is an example of how to use evaluate in MDX's sandbox starters/examples https://codesandbox.io/s/github/mdx-js/.github/tree/main/sandbox-templates/mdx-evaluate-create-react-app