MDX import not working in Create React App with Typescript

[janrembold]

Subject of the issue

I'm trying to use MDX-JS inside a React App that was created with Create React App and TypeScript support.
Following the instructions leads to this error message after starting the app:

Cannot find module '!babel-loader!@mdx-js/loader!./Content.mdx' or its corresponding type declarations.  TS2307

By the way, following the same instructions inside a non-Typescript CRA the MDX import works fine!

Environment

• OS: MacOS 10.15.7
• Env: node@14.16.1 - npm@7.11.1 - yarn@1.22.10

Steps to reproduce

You can find an absolute minimalistic demo here: https://github.com/janrembold/mdx-demo-ts

git clone https://github.com/janrembold/mdx-demo-ts.git
cd mdx-demo-ts
yarn && yarn start

Expected behaviour

The app should import the MDX file without any errors.

[JounQin]

It's a TypeScript usage problem with webpack loader syntax, nothing related to mdx at all.

[janrembold]

@JounQin I had also suspected this, but unfortunately your answer is not helpful at all. I had not found a solution on the internet and all users of MDX-JS with the same (default boilerplate) setup will have this problem. It would be much more helpful and appreciated to point to a solution here or to extend the documentation.

[JounQin]

Again, you should find your own answer or solution, learn more about how to declare custom modules, like declare module '*.mdx'. It's just not related to mdx here.

https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

[janrembold]

Have to correct myself, the mdx declaration works when the file is picked up correctly. Thanks for the hint!

[ChristianMurphy]

@janrembold this is a limitation of TypeScript, it does not automatically recognize new file types.
That said, MDX is aware of this and has documentation for how to connect the webpack loaders with typings, see #1592 (comment)

[janrembold]

This seems to work:

// Add to "src/mdx.d.ts"
declare module '*.mdx' {
  const MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
}

[ChristianMurphy]

This is noted in the TypeScript guide.
Docs for version 1 https://github.com/mdx-js/mdx/blob/master/docs/advanced/typescript.mdx

declare module '*.mdx' {
  let MDXComponent: (props: any) => JSX.Element
  export default MDXComponent
}

Docs for version 2 https://mdxjs.com/advanced/typescript

For React with MDX 2:

/// <reference types="@mdx-js/loader" />

For Vue with MDX 2:

/// <reference types="@mdx-js/vue-loader" />

[janrembold]

Thank you very much! I tried the v2 solution first, but this didn't work neither in my production nor the minimal CRA project. After this I stumbled upon the v1 solution but added the declaration to a file that wasn't included correctly.

But the v1 solution inside src/mdx.d.ts works fine with the latest create-react-app version which is currently 4.0.3. Maybe I also do something wrong with the v2 solution, but anyway, it works now.

[ChristianMurphy]

I tried the v2 solution first, but this didn't work neither in my production nor the minimal CRA project

Right, version 1 doesn't have d.ts files to be referenced.
Native typings are one of the feature adds of version 2 #1041

[janrembold]

Damn, now I get it. The MDX website shows documentation for the v2 beta version by default but npm latest is still v1. I haven't compared the installed version number with the guides version :(

[janrembold]

Thanks for the clarification @ChristianMurphy !

[teauxfu]

Just finding this -- fortunately before opening a new question.

I had this problem as well -- installed v1 but only consulting docs for v2. Maybe this discussion is worth pinning for a while?

Related: https://stackoverflow.com/a/67365297/13090245

[imballinst]

@ChristianMurphy @janrembold I managed to make MDX v2 work with Create React App TypeScript, but with some adjustments: https://github.com/imballinst/mdx2-cra

Instead of inlining the import, I used craco (can be anything, like react-app-rewired or else).

{
  test: [/\.mdx$/],
  use: [{ loader: "babel-loader" }, { loader: "@mdx-js/loader" }],
}

Then, I'm not sure why the <reference ... /> tag won't work, so I used the good ol' v1 approach so TypeScript won't complain:

// mdx.d.ts
declare module "*.mdx" {
  let MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
}

I do manually import the declaration file in index.tsx:

// index.tsx
import "./mdx.d";

Then in the main App:

// App.tsx
import Content from "./Content.mdx";

function App() {
  return <Content />;
}

export default App;

[SimonGolms]

Anyone who has made it to this point, I would like to save you the time and frustration that the previous solutions are no longer compatible with the current rc versions (2.0.0-rc.1, 2.0.0-rc.2). Latest known possible solution with cra typescript is 2.0.0-next.9.

Demo: 2.0.0-rc.2 vs 2.0.0-next.9

[ChristianMurphy]

The types have changed since this discussion, a guide on using the types in the latest version is provided in the getting started guide on the website https://mdxjs.com/advanced/typescript which is also linked in the selected answer.