How to make component imports work?

[ImExoOdeex]

Hi, I am using async evaluate function with vite and it compiles normal md nicely, but when I try to import any component it shows TypeError: Failed to resolve module specifier 'react' error in console. In this case 'react' is a library I am importing from. I am using vite and I put the rollup plugin in first place. This is my simple code:

                    await evaluate(content, {
                        ...(runtime as any),
                        Fragment: runtime.Fragment,
                        useMDXComponents,
                        baseUrl: import.meta.url
                    })

Does anyone know why it is like that?

[ChristianMurphy]

Welcome @ImExoOdeex!
When evaluate is run it is running ESM in the browser.
You may need an import map to let it know how to resolve react and any other runtime modules https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

[wooorm]

why it is like that?

It is like that for the same reason that if you write import('react') right here in your dev tools, that your browser doesn’t know where to get react from, what it even is.
Your vite/rollup things work on your local computer or on some CI. They’re not in everyones the browser. This code runs in everyones browser.