0

I have generated (from GraphQL Codegen and my API) a TypeScript types modules file and want to add all of its types to my project, application-wide (globally). The types are in src/generated/generatedTypes.ts which also has an export {}; line (making it a module).

tsconfig.ts defines:

"include": [ "src/generated", // bring in my generated types "**/*.ts", // bring in the rest of the project's files

The first include directive tells TypeScript to load all the types from my src/generated folder (including generatedTypes.ts). However, inside my .ts files I still get "Cannot find name SomeType" errors; the types aren't there. How can I make the types in generatedTypes.ts available to the rest of my project?

Full tsconfig.ts file:

{ "ts-node": { "require": ["tsconfig-paths/register"] }, "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "baseUrl": "./", "checkJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "paths": { "app/*": ["./app/*"], "pages/*": ["./pages/*"], "src/*": ["./src/*"] }, "plugins": [ { "name": "next" } ], "strictNullChecks": true, "target": "es2017", // "types": ["node"], // "typeRoots": ["./node_modules/@types", "./src/generated"] }, "include": [ "src/generated", "next-env.d.ts", ".next/types/**/*.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "postgraphile.cjs", ], "exclude": ["node_modules", "migrations/**"], "skipLibCheck": false, // "skipLibCheck": true /* Skip type checking all .d.ts files. */ }

The types in generatedTypes.ts aren't important but the file looks like:

export {}; type System = GQLNode & { __typename?: 'System'; createdAt?: Maybe<Scalars['Datetime']['output']>; // lots more definition }; // lots more types

There is no global declaration in the file because I didn't think it was necessary. The end of the file is just:

type SignupMutation = { __typename?: 'Mutation'; registerUser?: { __typename?: 'RegisterUserPayload'; jwtToken?: any | null; } | null; };
Improve this question
5
  • "it used to work without the explicit global declaration"—maybe in the past you weren't emitting that export {}. That would make TypeScript view the file as a module rather than a script. Maybe this is also what your noExport: true configuration change does. Commented Aug 15 at 19:27
  • How can this be closed for lacking debugging info? Another user (not me) literally looked at my question, with its debugging details, and solved the problem ... in the comments (now deleted)! By definition, the necessary debugging info must be present, because how else could he have found the problem! And of course, my very last code sample demonstrates the problem (it lacks declare global, which was my issue). Commented Aug 16 at 15:44
  • I didn't vote to close this and don't have enough reputation to see any details (not sure if that's even a thing), but this often happens to questions that lack a minimal reproducible example. You should strive to make sure it's as easy as possible for anyone who comes along to reproduce the problem you're seeing. In this case that might include an example .gql file, your package.json including dependencies and the scripts to use to run codegen, etc. I'm not necessarily implying I agree with this closure, just trying to give you some insight for the future. Commented Aug 16 at 16:38
  • Sorry if it was unclear: my comment wasn't targeted at you, but at the people who voted to close. Also, there's a careful balance between including too much and too little: it's hard to know exactly what to include. Ultimately, none of those things you mentioned were necessary for the answer ... so I'm still not convinced it deserved closure. Commented Aug 16 at 22:54
  • 2
    You were clear—I didn't think you were targeting me. My disclaimer was an (apparently-backfired) attempt to set the tone for my comment (sympathetic rather than defensive). I pretty much agree with what you said, but one more note: the (perhaps-unintuitive) ideal outcome of a StackOverflow question isn't merely generating an answer that helps the asker; it's creating a record of a problem plus solutions that help all future readers with the same problem. I see you've been around here a while so you're probably in tune with this, but maybe this comment will also be helpful to future folk 🙂. Commented Aug 17 at 16:50

1 Answer 1

Reset to default
2

With help (from @Eric MORAND in the comments; now deleted, but thank you!), I found the problem: my types weren't wrapped in a global declaration.

With GraphQL Codegen you need to add noExport: true under the generates config in the codgen.ts or codgen.yaml file to have it add the relevant wrapper:

declare global { // file contents }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.