Mdx can't be configured with CRA Typescript project.

[mtajammulzia]

I am trying to configure mdx with my typescript react project but I can't seem to make it work, any help will be appreciated. Here is what I have done so far:

1. Installed @mdx-js/loader as mentioned https://mdxjs.com/docs/getting-started/
2. Installed @mdx-js/react as mentioned https://mdxjs.com/docs/getting-started/
3. Added mentioned lines of code in node_modules/react-scripts/config/webpack.config.js, it is now:

module: {
      rules: [
       ....
        {
          test: /\.mdx?$/,
          use: [
            {
              loader: '@mdx-js/loader',
              /** @type {import('@mdx-js/loader').Options} */
              options: {}
            }
          ]
        },
        ...
      }

When I import my mdx file and render it as a component in jsx I get this error

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/blog.d7cd5950a0aaf4def22d.mdx') is not a valid name.
The above error occurred in the </static/media/blog.d7cd5950a0aaf4def22d.mdx> component:

The file I am importing is named as "blog.mdx".

What am I doing wrong?

[ChristianMurphy]

@mtajammulzia sorry you ran into a spot of trouble.
Could you share a runnable example of the issue?
From the error message you shared I'm not sure the issue is TypeScript or MDX related per-se

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/blog.d7cd5950a0aaf4def22d.mdx') is not a valid name.

sounds like you have a <Document> JSX tag on the page, but haven't provided an implementation of that element?

[mtajammulzia]

import { FC } from "react";
import BlogMarkdown from "./blog.mdx";
import * as Styled from "./styles";

export const TestBlog: FC = () => {
  return (
    <Styled.BlogWrapper>
      <BlogMarkdown />
    </Styled.BlogWrapper>
  );
};

This is my component. I am also not sure if it is a typescript issue or mdx issue. Any guidance will be appreciated.

[ChristianMurphy]

Inside your MDX document, are you using a <Document> element?
If you are you need to pass the component to BlogMarkdown as described in https://mdxjs.com/docs/using-mdx/#components