Transclusion not working with importMDX?

[dorelljames]

I'm using CRA and instead of going to react-app-rewired path and configuring a lot of things, I decided and used the mdx.macro package instead. The problem is if I import a component in one of my MDX files, it throws an error

Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Copyright.9f00a09c.mdx') is not a valid name.

My doubt is this has something to do with using importMDX but I'm not really sure.

For a little bit of a setup:

// App.js

import React, { lazy, Suspense } from "react";
import { importMDX } from "mdx.macro";

const Main = lazy(() => importMDX("configurators/flex/main.mdx"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Main />
    </Suspense>
  );
}

// main.mdx
# Flex Configurator

import Copyright from "configurators/flex/Copyright.mdx";

<Copyright />

The main.mdx file returns an error when I use <Copyright /> component in there. The import is correct and successful.

I also went to use MDXProvider route to make my components available globally but to no avail. Anyone can shed some light on this, please? Thank you! Appreciate it.

[wooorm]

importMDX is not maintained by us here, but provided by a different package: mdx.macro. Maybe you’ll have better luck asking there.

[dorelljames]

Thanks, @wooorm. It didn't occur to me to check there until you mentioned it now. And surprisingly, there's still a pending issue. I guess I'll skip using this in the meantime. Do you know any recommended setup or shall I go with the DYI setup here?

[ChristianMurphy]

#589 gives an alternative for CRA using mdx-loader, it should also work with @mdx-js/loader

[dorelljames]

Thanks @ChristianMurphy 😊