dotansimha / dotansimha/graphql-code-generator-community

TypeScript 5: Cannot find module 'graphql-request/dist/types.dom' or its corresponding type declarations.

Open
#893 7 comments 20 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Which packages are impacted by your issue?

@graphql-codegen/typescript-operations, @graphql-codegen/typescript

### Describe the bug

This is related to https://github.com/dotansimha/graphql-code-generator-community/issues/501 but the issue is different after updating to TypeScript 5.x

I used these packages versions from my package.json (also impacts version 4)

```json
"@graphql-codegen/cli": "3.3.1",
"@graphql-codegen/introspection": "3.0.1",
"@graphql-codegen/near-operation-file-preset": "2.5.0",
"@graphql-codegen/typescript": "3.0.4",
"@graphql-codegen/typescript-operations": "3.0.4",
"@graphql-codegen/typescript-react-query": "4.1.0",
```

Also [unlike the fix](https://github.com/dotansimha/graphql-code-generator-community/releases/tag/release-1684417928535) for issue dotansimha/graphql-code-generator-community#501, I do not use `@graphql-codegen/typescript-graphql-request` instead I installed `graphql-request` directly because we use it in our code. This is how the package looks like with `npm ls graphql-request`:

```sh
├─┬ @graphql-codegen/cli@3.3.1
│ └─┬ @graphql-tools/prisma-loader@7.2.54
│ └── graphql-request@5.2.0
└── graphql-request@6.0.0
```

This is a sample of our codegen config, which uses a `graphql-request` fetcher:

```js
'./src/graphql': {
preset: 'near-operation-file',
presetConfig: {
baseTypesPath: 'graphql-types.generated.ts',
extension: '.generated.ts',
},
plugins: ['typescript-operations', 'typescript-react-query'],
config: {
namingConvention: {
enumValues: 'change-case-all#constantCase',
},
exposeFetcher: true,
useTypeImports: false,
skipTypeName: true,
avoidOptionals: true,
maybeValue: 'T | undefined',
exposeQueryKeys: true,
fetcher: 'graphql-request',
pureMagicComment: true,
skipTypename: true,
withHooks: true,
withHOC: false,
withComponent: false,
},
},
```

When we run codegen, the generated files include the following problematic line:

image

Before TypeScript 5.x, the fix was to replace:

`import { RequestInit } from 'graphql-request/dist/types.dom';` by `import { RequestInit } from 'graphql-request/src/types.dom';` (this is being discuss in dotansimha/graphql-code-generator-community#501)

As soon as TypeScript is updated to 5.x then it is bundled with a `RequestInit` in `node_modules/typescript/lib/lib.dom.d.ts` so the line becomes obsolete.

The expected result would be that the generated file do not contain that line.

In fact, I am applying the current fix today to be able to build my application:

1) I added hooks in the codegen config
```js
hooks: {
// Codegen does not always regenerate new files unless files do not exist.
afterStart: ["find ./src/graphql -name '*.generated.*' -delete"],
// This will remove all the `RequestInit` lines.
afterOneFileWrite: ['ts-node ./src/graphql/codegen-fix.ts'],
},
```
2) The script removing the line:

```js
import * as fs from 'node:fs'

const generatedFilePath = process.argv[2]
const generatedFileContent = fs.readFileSync(generatedFilePath).toString()
fs.writeFileSync(
generatedFilePath,
generatedFileContent.replaceAll(/import { requestinit } from.+\r?\n/gi, '')
)
```

### Platform

- OS: macOS
- NodeJS: 18.10
- `graphql-request` version: 6
- `@graphql-codegen/*` version(s): 3.3.1

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.