MDX import not working in Create React App with Typescript #1592
-
Subject of the issueI'm trying to use MDX-JS inside a React App that was created with Create React App and TypeScript support.
By the way, following the same instructions inside a non-Typescript CRA the MDX import works fine! Environment
Steps to reproduceYou can find an absolute minimalistic demo here: https://github.com/janrembold/mdx-demo-ts
Expected behaviourThe app should import the MDX file without any errors. |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 13 replies
-
It's a TypeScript usage problem with webpack loader syntax, nothing related to mdx at all. |
Beta Was this translation helpful? Give feedback.
-
@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. |
Beta Was this translation helpful? Give feedback.
-
This seems to work:
|
Beta Was this translation helpful? Give feedback.
-
This is noted in the TypeScript guide. 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" /> |
Beta Was this translation helpful? Give feedback.
-
@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 {
test: [/\.mdx$/],
use: [{ loader: "babel-loader" }, { loader: "@mdx-js/loader" }],
} Then, I'm not sure why the // 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
import "./mdx.d"; Then in the main // App.tsx
import Content from "./Content.mdx";
function App() {
return <Content />;
}
export default App; |
Beta Was this translation helpful? Give feedback.
-
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 ( Demo: 2.0.0-rc.2 vs 2.0.0-next.9 |
Beta Was this translation helpful? Give feedback.
This is noted in the TypeScript guide.
Docs for version 1 https://github.com/mdx-js/mdx/blob/master/docs/advanced/typescript.mdx
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" />