dotansimha / dotansimha/graphql-code-generator-community
TypeScript 5: Cannot find module 'graphql-request/dist/types.dom' or its corresponding type declarations.
- 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:
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.