I remotely get the content from Strapi API:
import CookieSettings from './components/shared/buttons/cookieSettings'
<CookieSettings />
Some content...
then I prepare mdx during entities adaptation, this function is in a separate folder and it's called in getStaticProps. Here my function to prepare mdx:
export async function prepareMdx(source: string) {
return bundleMDX({
source,
cwd: process.cwd(),
esbuildOptions(options) {
options.target = 'esnext';
return options;
},
mdxOptions(options) {
options.remarkPlugins = [
...(options.remarkPlugins ?? []),
remarkGfm,
remarkUnwrapImages,
];
options.rehypePlugins = [
...(options.rehypePlugins ?? []),
rehypeRaw,
imageMetadata,
rehypeSlug,
];
return options;
},
});
}
Then, I use the mdx component from mdx-bundler to create my custom rich text component in the components folder.
const Component = useMemo(() => getMDXComponent(code), [code])
return (
<Component components={{img: Img, CookieSettings}}/>
)
But I have encountered this error:
✘ [ERROR] [plugin @mdx-js/esbuild] Error: Cannot compile `mdxjsEsm` node
at unknown (file:///app/node_modules/hast-util-raw/lib/index.js:512:9)
at one (file:///app/node_modules/zwitch/index.js:52:17)
at all (file:///app/node_modules/hast-util-raw/lib/index.js:255:13)
at root (file:///app/node_modules/hast-util-raw/lib/index.js:265:9)
at one (file:///app/node_modules/zwitch/index.js:52:17)
at fragment (file:///app/node_modules/hast-util-raw/lib/index.js:214:9)
at raw (file:///app/node_modules/hast-util-raw/lib/index.js:151:43)
at file:///app/node_modules/rehype-raw/index.js:18:41
at wrapped (file:///app/node_modules/trough/index.js:115:27)
at next (file:///app/node_modules/trough/index.js:65:23)
_mdx_bundler_entry_point-3824309b-07cd-4c60-abee-4018489ffca1.mdx:0:0:
0 │ import CookieSettings from './components/shared/buttons/cookieSetti...
╵ ^
The component's path I tried to import is components/shared/buttons/cookieSettings.tsx
, so I don't understand what the problem is...