Fix: Cannot find module 'MyComponent.mdx' or its corresponding type declarations in React
![](https://res.cloudinary.com/dicyllvry/image/upload/f_auto,c_limit,w_3840,q_auto/w_1200/luis-martinez/saito200_Castilla_La_Mancha_beautiful_composition_wide_shot_pai_e1a2a667-9d87-43ba-9508-310a94ffb252_r4ni65.png)
If you are trying to import .mdx
files with Typescript in your React project, you might be getting an error looking like this:
Fix: Cannot find module 'MyComponent.mdx' or its corresponding type declarations in React
Here's how to fix it:
First, install @types/mdx
:
pnpm i -D @types/mdx
Then, inside your project, add a types folder with a mdx.d.ts
file (e.g. ./src/types/mdx.d.ts
), and paste this in the file:
declare module '*.mdx' {
let MDXComponent: (props: any) => JSX.Element;
export default MDXComponent;
}
Now open your tsconfig.json
file, and do these two things:
Add
"mdx"
inside"types"
:
{
"compilerOptions": {
...
"types": ["react/next", "react-dom/next", "mdx"]
},
...
}
Make sure the path of the
mdx.d.ts
file is included. If you added it inside thesrc
folder, this should be enough:
{
...
"include": ["src"],
...
}
It should work now. Good luck!