导入.docs.mdx到.tsx时报找不到模块及类型声明，自定义类型失效如何解决？

• 第一步：安装MDX官方类型包
  执行命令安装基础类型依赖：

  npm i @types/mdx -D
  

• 第二步：添加全局类型声明
  在项目根目录新建global.d.ts文件，不要放在嵌套的@types目录下避免读取失败，写入以下内容：

  declare module '*.docs.mdx' {
    import type { MDXProps } from 'mdx/types';
    const MDXComponent: (props: MDXProps) => JSX.Element;
    export default MDXComponent;
  }
  

• 第三步：修正tsconfig.json配置
  确认配置文件中以下字段配置正确：

  {
    "include": ["src/**/*", "global.d.ts"], // 必须包含你的声明文件路径
    "compilerOptions": {
      "typeRoots": ["node_modules/@types", "./"] // 声明文件放在根目录就加当前路径，放在src/@types就对应填写路径
    }
  }
  

• 第四步：配置打包工具的MDX解析规则
  如果你用Vite，需要在vite.config.ts中配置MDX插件识别你的自定义后缀：

  import mdx from '@mdx-js/rollup';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [
      mdx({
        include: /\.docs\.mdx$/,
      })
    ]
  });
  

  如果你用Webpack，需要在模块规则中添加对应的loader配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.docs\.mdx$/,
          use: ['@mdx-js/loader'],
        },
      ],
    },
  }
  

• 第五步：重启TypeScript语言服务
  编辑器中按下Ctrl+Shift+P（Mac为Cmd+Shift+P），选择「TypeScript: Restart TS Server」清除缓存即可。

内容的提问来源于stack exchange，提问作者Henrique Tavares