Build issues when using gql with ESM

[aliok]

When using ESM, gql becomes non-callable because TS doesn't like namespaces with ESM index.d.ts file:

export declare function gql(literals: string | readonly string[], ...args: any[]): DocumentNode;
export declare namespace gql {
    var _a: typeof import(".").gql;
    export { _a as default };
}

I get this error:

export const RepositorySummary = gql`
                                      ~~~
src/generated/queries.ts:6880:33 - error TS2349: This expression is not callable.

Similar to dotansimha/graphql-code-generator-community#228

[phryneas]

Could you please create a TypeScript playground or reproduction project for that?
This depends mostly on your personal setup, and I will not be able to replicate it with the information in your post alone.

[kloostec]

Here's an example: Playground Link

The error comes up as soon as you go into TS Config and change pretty much anything -- I set the Target to ES2022 for example and get the error immediately when the playground switched into ESM mode:

This expression is not callable.
Type 'typeof import("file:///node_modules/graphql-tag/lib/index")' has no call signatures. (2349)

[Josh-Cena]

@phryneas This should help: https://arethetypeswrong.github.io/?p=graphql-tag%402.12.6

[TimUnderhay]

@phryneas I've had the same issue for some time. I've hacked my way around it through a "postcodegen" npm script, but fixing the library exports would be preferable.

sed -i \"s/import gql from 'graphql-tag'/import { gql } from 'graphql-tag'/\" src/gql/sdk.ts

[StefanTheWiz]

Building on @TimUnderhay's suggestion, I've noticed there's a hooks config option that appends the file name to the given command

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: "...",
  documents: "...",
  generates: {
    "generated/types.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        //...
      ],
    },
  },
  hooks: {
    afterAllFileWrite: [
      `sed -i '' "s/import gql from 'graphql-tag'/import { gql } from 'graphql-tag'/"`
    ],
  },
};

export default config;

[Borvik]

I started running into this when trying to upgrade a react application to use esm (manually setup, no framework).

I'm setup for SSR, so trying to run my project loads up @apollo/client which re-exports this via:

 export { gql, resetCaches, disableFragmentWarnings, enableExperimentalFragmentVariables, disableExperimentalFragmentVariables, } from "graphql-tag";

So I ultimately end up with an error like this:

SyntaxError: Named export 'gql' not found. The requested module 'graphql-tag' is a CommonJS module, which may not support all module.exports as named exports.

This likely stems from loading the script via the "module": "./lib/index.js", and while the exports in that file look ok, it's likely coming from the fact there is no "type": "module" in the package.json for this library.

I get that adding that directive might break things, but maybe instead of ./lib/index.js it points to a ./lib/index.mjs - maybe that would solve most of the esm issues.