已配置babel插件和类型声明导入graphql文件报TS2307错误如何解决

• 第一步校验类型声明文件配置：
  确认你的graphql.d.ts内容符合规范，标准写法如下：

  declare module '*.graphql' {
    import { DocumentNode } from 'graphql';
    const content: DocumentNode;
    export default content;
  }
  

  注意要将该声明文件路径加入tsconfig.json的include配置项中，比如声明文件放在根目录就加"graphql.d.ts"，放在src/@types目录就加"src/@types/**/*"，否则TypeScript无法识别该类型定义，就会抛出找不到模块的错误。
• 第二步校验文件路径正确性：
  确认schema.graphql和导入它的index.ts文件路径匹配，注意操作系统的大小写敏感问题，文件名大小写和导入语句中的大小写必须完全一致。
• 第三步校验执行链路配置：
  如果你直接使用tsc编译或者ts-node运行项目，babel插件不会在类型检查阶段生效，你需要使用babel-node配合@babel/preset-typescript运行，或者给打包工具配置对应的graphql处理loader：
  • webpack项目需在module.rules中添加graphql-tag/loader处理.graphql后缀文件
  • vite项目需安装vite-plugin-graphql-loader并在vite配置中注册
• 第四步适配导入规则：
  部分graphql导入插件默认使用命名导出而非默认导出，你可以尝试将导入语句改为import { typeDefs } from "./schema.graphql"，或者调整声明文件的导出规则适配插件逻辑。

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