Import packages inside mdx string

[Roberto4091]

im consume mdx from api. this is my serializer component to convert mdx string to valid mdx

import { useEffect, useState } from 'react';
import { evaluate } from '@mdx-js/mdx';
import * as runtime from 'react/jsx-runtime';
import * as provider from '@mdx-js/react';

const Mdx = ({ value, ...props }) => {
  const [exports, setExports] = useState(() => ({ default: runtime.Fragment }));

  const { default: Content } = exports;

  useEffect(() => {
    const load = async () => {
      try {
        const mdx = await evaluate(value, {
          ...runtime,
          ...provider,
          useDynamicImport: true,
        });

        setExports(mdx);
      } catch (error) {
        console.log(error);
      }
    };

    load();
  }, [value]);

  return <Content {...props} />;
};

and this is a mdx string

import {Box, Heading} from 'rebass'
<p>lorem</p>

but when use, have a error when import rebass module

can you help me find the problem?

Environment data:

• "react": "^18.1.0"
• "react-scripts": "5.0.1"
• "rebass": "^4.0.7"
• "@mdx-js/mdx": "^2.1.3"
• "@mdx-js/react": "^2.1.3"
• Node 6.15.0-bullseye

Thanks!

[wooorm]

This error is because you can’t just run import('rebass') in a browser either. Try pasting that in your console, you’ll get a similar error.

Either:

• use point to a bundled rebass, ./my-bundles/rebass.js
• use a CDN, such as esm.sh
• Pass components in