Typescript 4.7 & Node16 ModuleResolution compilation errors.

[chrisui]

Issue workflow progress

Progress of the issue based on the Contributor Workflow

• [ ] 1. The issue provides a reproduction available on GitHub, Stackblitz or CodeSandbox

Make sure to fork this template and run yarn generate in the terminal.

Please make sure the Codegen and plugins version under package.json matches yours.

• [ ] 2. A failing test has been provided
• [ ] 3. A local solution has been provided
• [ ] 4. A pull request is pending review

---

Describe the bug

Types are not configured correctly for Typescript 4.7 and Node16+ module resolution usage.

[This comment](https://github.com/microsoft/TypeScript/issues/49160#issuecomment-1137482639 points at why errors would be occuring despite there being a "types" field and the *.d.ts files are present in the packages.

src/executors/gql.ts(6,25): error TS7016: Could not find a declaration file for module '@graphql-codegen/core'. '/home/chris/projects/_/node_modules/@graphql-codegen/core/index.mjs' implicitly has an 'any' type.
         Try `npm i --save-dev @types/graphql-codegen__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@graphql-codegen/core';`
       src/executors/gql.ts(7,23): error TS7016: Could not find a declaration file for module '@graphql-codegen/add'. '/home/chris/projects/_/node_modules/@graphql-codegen/add/index.mjs' implicitly has an 'any' type.
         Try `npm i --save-dev @types/graphql-codegen__add` if it exists or add a new declaration (.d.ts) file containing `declare module '@graphql-codegen/add';`
       src/executors/gql.ts(8,35): error TS7016: Could not find a declaration file for module '@graphql-codegen/typescript'. '/home/chris/projects/_/node_modules/@graphql-codegen/typescript/index.mjs' implicitly has an 'any' type.
         Try `npm i --save-dev @types/graphql-codegen__typescript` if it exists or add a new declaration (.d.ts) file containing `declare module '@graphql-codegen/typescript';`
       src/executors/gql.ts(9,44): error TS7016: Could not find a declaration file for module '@graphql-codegen/typescript-resolvers'. '/home/chris/projects/_/node_modules/@graphql-codegen/typescript-resolvers/index.mjs' implicitly has an 'any' type.
         Try `npm i --save-dev @types/graphql-codegen__typescript-resolvers` if it exists or add a new declaration (.d.ts) file containing `declare module '@graphql-codegen/typescript-resolvers';`
       src/executors/gql.ts(10,45): error TS7016: Could not find a declaration file for module '@graphql-codegen/typescript-operations'. '/home/chris/projects/_/node_modules/@graphql-codegen/typescript-operations/index.mjs' implicitly has an 'any' type.
         Try `npm i --save-dev @types/graphql-codegen__typescript-operations` if it exists or add a new declaration (.d.ts) file containing `declare module '@graphql-codegen/typescript-operations';`

To Reproduce

Attempt to programatically use any codegen package from a "type: module" package with the following tsconfig. Build with tsc.

{
  "compilerOptions": {
    "target": "ES2021",
    "lib": ["ES2021"],
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "node16",
    "moduleResolution": "node16",
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
   }
}

Expected behavior

Compiles successfully.

Environment:

• OS: Ubuntu
• @graphql-codegen/...: @graphql-codegen/typescript-operations for example but any will break
• NodeJS: 16.15

Additional context

https://github.com/microsoft/TypeScript/issues/49160#issuecomment-1137482639

[chrisui]

Have also noticed type errors in the generated code for apollo hooks.

dist/gql/graphql.tsx(1752,44): error TS2694: Namespace '"/Users/_/node_modules/@apollo/client/index"' has no exported member 'QueryHookOptions'.
dist/gql/graphql.tsx(1754,17): error TS2339: Property 'useQuery' does not exist on type 'typeof import("/Users/_/node_modules/@apollo/client/index", { assert: { "resolution-mode": "import" } })'.

[n1ru4l]

Can you please provide a minimal reproduction repository with the latest codegen versions?

[irontitan76]

This is a problem stemming from the node resolution strategy (node16). With hook generation, I believe the generated code is outputting something like the following and Apollo is defined as a namespace in TypeScript. When TypeScript is configured to have a node resolution of nodenext or node16, import resolution is broken. Subsequently, the hooks are typed as Apollo.<method>.

import * as Apollo from '@apollo/client';

export function useExampleQuery(baseOptions: Apollo.QueryHookOptions<ExampleQuery, ExampleQueryVariables>) {
  const options = {...defaultOptions, ...baseOptions}
  return Apollo.useQuery<ExampleQuery, ExampleQueryVariables>(ExampleQuery_, options);

The appropriate generated imports perhaps could be

1. Direct reference to React's exports in @apollo/client.

import * as Apollo from '@apollo/client/react/index.js';

2. Or more direct references to individual files, which may be necessary depending on the import.

import { useQuery } from '@apollo/client/react/hooks/useQuery.js';
import { LazyQueryHookOptions, QueryHookOptions, } from '@apollo/client/react/types/types.js';
import { useLazyQuery } from '@apollo/client/react/hooks/useLazyQuery.js';

export function useExampleQuery(baseOptions:QueryHookOptions<ExampleQuery, ExampleQueryVariables>) {
  const options = {...defaultOptions, ...baseOptions}
  returnuseQuery<ExampleQuery, ExampleQueryVariables>(ExampleQuery_, options);

Another, likely better, solution is talking to the @apollo/client team about their resolution strategy. Given that ESM modules and NodeNext resolution strategies are where the industry is headed, it's likely a good idea to resolve this sooner rather than later.

[maxpain]

Any updates?

[veeramarni]

I like the 2nd approach suggested by @irontitan76. Can we update it accordingly and release a new version?

@dotansimha Please fix this esm issue.