2

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...

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
Atomike-Toxic
  • 212
  • 1
  • 4
  • 12

0 Answers0