#Define type for import of files resolved through loaders

6 messages · Page 1 of 1 (latest)

wet ice
#

I have an project, which uses esbuild and an esbuild-graphql-loader to load .graphql files via import statement. The resulting object is a GraphQLSchema. The problem I now face is the Typescript nagging me that: Cannot find module './math.graphql' or its corresponding type declarations.ts(2307).

So I searched the web and found some examples how to define certain filetypes to be certain objects on import, so I added

types/graphql.d.ts

import { GraphQLSchema } from "graphql";

declare module "*.graphql" {
  const file:GraphQLSchema;
  export default file;
}

export {}

I also added it to my tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "module": "commonjs",
    "sourceMap": true,
    "lib": ["esnext", "DOM"],
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
  },
  "include": ["types/*.d.ts"]
}

But the typescript error Cannot find module './math.graphql' or its corresponding type declarations.ts(2307) persists though. My Filesystem structure is (if thats important regarding the loading of .d.ts files):

./.prettierignore
./types
./types/types.d.ts
./types/environment.d.ts
./.editorconfig
./readme.md
./prisma
./prisma/schema.prisma
./static
./.gitignore
./.eslintignore
./src
./src/util
./src/util/prisma.ts
./src/util/build.ts
./src/util/graphql.ts
./src/util/fastify.ts
./src/index.ts
./src/schema
./src/schema/index.ts
./src/schema/math.graphql
./src/util.ts
./src/resolvers
./src/resolvers/math.resolver.ts
./src/resolvers/index.ts
./__integration-test__
./__integration-test__/fastify-modules.spec.ts
./tsconfig.json
./package.json
./.env
./jest.config.js
./package-lock.json
wet ice
#

Oddly enough it only displays me this in vscode, not my eslint nor my tsc --noEmit ...

#

(and yes I reloaded, even restarted vscode since, save behavior about nagging ts(2307)

wet ice
#

Now it works, silly me imported the implementation not the type from the external dependency.

# 
import type { GraphQLSchema } from "graphql";

declare module "*.graphql" {
  const file:GraphQLSchema;
  export default file;
}

export {}

now works

#

!resolved