Typescript errors (cannot find module) when importing .md or .mdx files into a .tsx component

[pburrows]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

There is no documentation (or if there is, I cannot find it) of what needs to be modified in the tsconfig.json file to remove the "cannot find module" errors when importing .md or .mdx files into a .tsx page.

For sass modules (*.module.scss files), there is documentation on how to resolve these errors in typescript:
https://docusaurus.io/docs/styling-layout#typescript-support

I have no doubt the fix for .md and .mdx files are similar to the fix for sass, but it isn't obvious, and I haven't been able to figure out what docusaurus plugin item needs to be added to the tsconfig.json types to resolve these issues.

Examples of error:

Self-service

• I'd be willing to address this documentation request myself.

[slorber]

please provide a repro, we can't help without it.

You don't even share your current tsconfig

The styling docs page has a mistake, I'll fix it. If you don't, you should use @docusaurus/tsconfig, not @tsconfig/docusaurus/tsconfig.json

[pburrows]

My tsconfig.json currently looks like this:

{
  // This file is not used in compilation. It is here just for a nice editor experience.
  "extends": "@docusaurus/tsconfig",
  "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "docusaurus-plugin-sass",
    ]
  }
}

As for steps to reproduce... you don't really need any. Try to import a markdown document. For instance, create a brand new docusaurus project straight from the docs like this:

npx create-docusaurus@latest my-website classic --typescript

then open up the src/pages/index.tsx file and add this to the top (you don't even have to run it)

import TranslateYourSite from '../../docs/tutorial-extras/translate-your-site.md';

You should see that line highlight with a TS2307 error.

And it doesn't matter where the markdown file is. You can create an .md file in the same folder and you get the same behavior.

It's not a bug, really, it is a documentation error. Something is missing in the tsconfig.json file to properly recognize the .md and .mdx files as modules.

[Josh-Cena]

Indeed, I think you would need something like

declare module "*.mdx" {
  function Component(): JSX.Element;

  export default Component;
}

To make it work

[slorber]

👍

I think we'll add this to our module type aliases, considering we already handle some similar cases:

declare module '*.svg' {
  import type {ComponentType, SVGProps} from 'react';

  const ReactComponent: ComponentType<
    SVGProps<SVGSVGElement> & {title?: string}
  >;

  export default ReactComponent;
}

declare module '*.module.css' {
  const classes: {readonly [key: string]: string};
  export default classes;
}

declare module '*.css' {
  const src: string;
  export default src;
}

Will think about it, maybe the type should also expose other things like the toc, metadata, frontmatter etc