Using with mdx `evaluate` throws error

[yuleicul]

import { evaluate } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import { remarkCodeHike } from '@code-hike/mdx';
import '@code-hike/mdx/dist/index.css';

const { default: Content } = await evaluate(
  '# Hello\nLorem ipsum dolor sit amet.\n```python hello.py mark=1[22:30]\nprint("Rendered with Code Hike")\n```',
  {
    ...runtime,
    development: false,
  }
);

function App() {
  return <Content />;
}

export default App;

The above code works well, but if add remarkCodeHike as following:

import { evaluate } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import { remarkCodeHike } from '@code-hike/mdx';
import '@code-hike/mdx/dist/index.css';

const { default: Content } = await evaluate(
  '# Hello\nLorem ipsum dolor sit amet.\n```python hello.py mark=1[22:30]\nprint("Rendered with Code Hike")\n```',
  {
    ...runtime,
+  remarkPlugins: [remarkCodeHike],
    development: false,
  }
);

function App() {
  return <Content />;
}

export default App;

an error occurs:

Reproduction: https://stackblitz.com/edit/vitejs-vite-mwh7mi?file=src%2FApp.jsx

[pomber]

what's the error?

[yuleicul]

If I set a breakpoint to the line throwing the error, I can see it says "Cannot use import or export … from in evaluate (outputting a function body) by default: please set useDynamicImport: true (and probably specify a baseUrl)"

But if I set useDynamicImport: true,

import { evaluate } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import { remarkCodeHike } from '@code-hike/mdx';
import '@code-hike/mdx/dist/index.css';

const { default: Content } = await evaluate(
  '# Hello\nLorem ipsum dolor sit amet.\n```python hello.py mark=1[22:30]\nprint("Rendered with Code Hike")\n```',
  {
    ...runtime,
+    useDynamicImport: true,
    remarkPlugins: [remarkCodeHike],
    development: false,
  }
);

function App() {
  return <Content />;
}

export default App;

then another error occurs

VM263:5 Uncaught TypeError: Failed to resolve module specifier '@code-hike/mdx/dist/components.cjs.js'
    at eval (eval at run2 (@mdx-js_mdx.js?v=610dd0a6:27790:10), <anonymous>:5:29)
    at run2 (@mdx-js_mdx.js?v=610dd0a6:27790:41)
    at evaluate (@mdx-js_mdx.js?v=610dd0a6:27824:10)
    at async App.jsx:6:30

[pomber]

oh, yes, you need autoImport: false