Using codegen.ts in an ESM project causes cosmiconfig-typescript-loader to throw an "ES modules is not supported" error

[tars0x9752]

Describe the bug

I don't know if it's a bug or not, but I'm reporting it just in case. See steps to reproduce below for a more detailed bug/issue explanation.

In short, if you set "type": "module" in package.json and use codegen.ts as a config file, graphql-codegen fails because of ESM error by cosmiconfig-typescript-loader.

If you use codegen.yml or delete "type": "module" from package.json, the error will not occur.

Your Example Website or App

Not yet.

Steps to Reproduce the Bug or Issue

1. Add "type": "module" in package.json
2. Run npx graphql-code-generator init and leave everything as default to create codegen.ts
3. Run generated codegen npm script graphql-codegen --config codegen.ts. It throws the following error:

TypeScriptLoader failed to compile TypeScript:
Must use import to load ES Module: /path/to/project/codegen.ts
require() of ES modules is not supported.
require() of /path/to/project/codegen.ts from /path/to/project/node_modules/cosmiconfig-typescript-loader/dist/cjs/index.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from /path/to/project/package.json.

It maybe a bug in cosmiconfig-typescript-loader.

Expected behavior

Code generation completes without throwing an error.

Screenshots or Videos

No response

Platform

• OS: Linux x86_64
• NodeJS: 18.8.0
• "typescript": "4.8.4"
• "graphql": "16.6.0"
• "@graphql-codegen/cli": "2.13.7"
• "@graphql-codegen/typescript": "2.7.4"
• "@graphql-codegen/typescript-resolvers": "2.7.4"

Codegen Config File

No response

Additional context

a sample tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es2021",
    "lib": ["es2021"],
    "module": "Node16",
    "moduleResolution": "Node16",
    "esModuleInterop": true
  },
  "include": ["src"]
}

[Destreyf]

Hey @tars0x9752,

I about to move a project of mine over to ESM and noticed that the generator has a specific section in the documentation on getting ESM working,

I'm sure you have already seen it, but just in case: https://the-guild.dev/graphql/codegen/docs/getting-started/esm-typescript-usage

I haven't started the ESM migration myself so it's possible additional steps outside of that documentation are needed.

The quick version is

• add emitLegacyCommonJSImports: false, to your codegen.ts file.
• set module and moduleResolution to node16 in your tsconfig.ts
• set type to module in package.json
• modify generator command to use graphql-codegen-esm instead of graphql-codegen

A quick (empty) project seems to indicate this works on my end, but again I haven't tested with real project yet.

[tars0x9752]

Thanks for the reply. As you've guessed, I've already seen that document. The thing is, even that document's exmaple doesn't use codegen.ts. They use codegen.yml in the example. And as far as I have tested, even if you follow that document it doesn't work with codegen.ts.

As I wrote in my first comment, if I use something other than codegen.ts, such as codegen.yml, then problem doesn't occur. So I'm not in that much trouble because I can use codegen.yml as a workaround.

A quick (empty) project seems to indicate this works on my end, but again I haven't tested with real project yet.

Does it work with codegen.ts?

[Destreyf]

@tars0x9752 I didn't look at the example project, just the documentation on that page.

I did notice that you're running the graphql-codegen executable in your initial post and not the graphql-codegen-esm executable.

What happens if you run the following:

npx graphql-codegen-esm --config codegen.ts

I'm not sure what package needs to be installed to use graphql-codegen-esm without the npx call as I haven't spent much time looking at it, npx (assuming you're using npm) will at at least run the command.

[tars0x9752]

Thanks, but I've already tried graphql-codegen-esm too and that didn't work either.

It looks like cosmiconfig-typescript-loader cannot import codegen.ts if it's an ESM and requires the configuration file to be a CJS. (...probably they should consider using dynamic import instead of require.) FYI: https://github.com/Codex-/cosmiconfig-typescript-loader/blob/main/lib/loader.ts#L14

But these graphql libraries here such as graphql-config and @graphql-codegen/cli seem to be dependent on cosmiconfig-typescript-loader even if we use graphql-codegen-esm and codegen.ts with "type": "module".

[sirganya]

see this

[sirganya]

I'm also having the same issue.

[podefr]

having the same issue I just switched my codegen to a yml format instead of ts so it doesn't use the TypeScriptLoader which uses require to load the codegen file. just a workaround for now, coming from the apollo docs it'd be great if they "just worked", but yml will do for now :)

[sirganya]

I'm now having an error where @graphql-tools/code-file-loader is using require

Failed to load schema from ./src/gql/schema/*.ts: Failed to find any GraphQL type definitions in: ./src/gql/schema/*.ts; - Unable to load from file "/Users/sirganya/git/bwos/shared/src/gql/schema/getFiles.ts": Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/sirganya//git/bwos/shared/src/gql/s… require() of ES modules is not supported. require() of /Users/sirganya/git/bwos/shared/src/gql/schema/getFiles.ts from /Users/me/git/bwos/shared/node_modules/@graphql-tools/code-file-loader/cjs/load-from-module.js is an ES mod… Instead change the requiring code to use import(), or remove "type": "module" from /Users/sirganya/git/bwos/shared/package.json.

[gterras]

having the same issue I just switched my codegen to a yml format instead of ts so it doesn't use the TypeScriptLoader

Thanks a lot this solved my problem on a fresh sveltekit install
dotansimha/graphql-code-generator#8509

[sirganya]

Solved with this:

dotansimha/graphql-code-generator#8511 (comment)

[elijaholmos]

I'm having this problem as well, had to use a .yml config file to get around it. Annoying because that defats the purpose of using the TS config file in a TS project in the first place.

[gterras]

I'm having this problem as well, had to use a .yml config file to get around it. Annoying because that defats the purpose of using the TS config file in a TS project in the first place.

It isn't supposed to defeat anything really, just the extension of your codegen config file.