Using typescript-graphql-request with esm results in gql type error

[sirganya]

Describe the bug

When using graphql-codegen-esm and typescript-graphql-request

src/gql/generated/operations.ts:1489:34 - error TS2349: This expression is not callable. Type 'typeof import("me/node_modules/graphql-tag/lib/index")' has no call signatures.

Your Example Website or App

https://codesandbox.io/s/vigilant-framework-03nz6r?file=/codegen.yml

Steps to Reproduce the Bug or Issue

See the code sandbox example.

Expected behavior

I would expect gql types to be correct.

Screenshots or Videos

No response

Platform

macOs NodeJs 17.9.1 "@graphql-cli/codegen": "^2.4.10", "@graphql-codegen/cli": "^2.13.7", "@graphql-codegen/typescript": "^2.7.4", "@graphql-codegen/typescript-graphql-request": "^4.5.6", "@graphql-codegen/typescript-operations": "^2.5.4", "@graphql-codegen/typescript-resolvers": "^2.7.4", "@types/node": "15.0.1", "@types/rimraf": "^3", "graphql": "^16.5.0", "rimraf": "^3.0.2", "ts-node": "^10.9.1", "typescript": "^4.8.4"

Codegen Config File

overwrite: true
emitLegacyCommonJSImports: false
generates:
  ./src/gql/generated/schema.ts:
    schema:
      - ./src/gql/schema/*.ts:
          noPluck: true
    plugins:
      - typescript
      - typescript-resolvers
    config:
      makeResolverTypeCallable: true
      customResolverFn: ./codeGenCustomTypes#DefaultResolver
  ./src/gql/generated/operations.ts:
    schema:
      - ./src/gql/schema/*.ts:
          noPluck: true
    documents: ./src/gql/operations/*.graphql
    plugins:
      - typescript
      - typescript-operations
      - typescript-graphql-request
    config:
      typesPrefix: 'SDK_'

Additional context

I was wondering if changing the gqlImport config to use another lib might work. If that's the case do you have a recommended replacement

[joshuadutton]

I got around this issue by not using gql for my documents. Instead I use

    config: {
      documentMode: "documentNode",
    },

[trevorr]

Explicitly setting gqlImport works for me:

      config: {
        gqlImport: "graphql-tag#gql",
      },

This changes the import from

import gql from 'graphql-tag';

to

import { gql } from 'graphql-tag';