Error in @mdx-js/mdx: SyntaxError - Cannot use import statement outside a module within React Component error on Browser

ChrisHeptagon commented 1 year ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

@mdx-js/mdx

Link to runnable example

No response

Steps to reproduce

Import MDX-JS/MDX, Compile and Run into a react component

Make constant containing the result of the Compile Function: Exact code:

const test = String(await compile(rawSlides, {  development: false, outputFormat: 'program', useDynamicImport: true, providerImportSource: '@mdx-js/react', remarkPlugins: [], rehypePlugins: [] }));"

Make constant containing the result of the Run function: Exact code:
```
const { default: Content } = await run(test, runtime ); 
```

NOTE: 'runtime' is representing "import * as runtime from 'react/jsx-runtime'"

Place inline javascript within the react component return body, Exact code:
```
<div> {Content} </div>
```

Expected behavior

The MDX in a file I provided to the MDX package to compile and run to show up within the browser, along with imported components within the MDX file in question.

Actual behavior

Instead the content does not show up and the only hint of an error is the following error message within the browser console:

index-....js:86 SyntaxError: Cannot use import statement outside a module
    at new AsyncFunction (<anonymous>)
    at b0 ()
    at index-....js:86:4700

Runtime

Node v19

Package manager

npm v9

OS

Linux

Build and bundle tools

Vite

wooorm commented 1 year ago

This is not readable, can you use markdown code to show code? learn markdown here: https://commonmark.org/help/

wooorm commented 1 year ago

You set outputFormat: 'program'. You must set it to 'function-body'.

mdx-js / mdx