Failed to compile in React Typescript with graphql-typed-document-node

Hi, I'm trying out your library. The example works fine for me, but when I apply it to my app, it failed to compile.

I have generated the types from backend schema and frontend operations. The file looks like this
```
import { GraphQLResolveInfo } from 'graphql';
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
export type Maybe = T | null;
export type InputMaybe = Maybe;
export type Exact = { [K in keyof T]: T[K] };
export type MakeOptional = Omit & { [SubKey in K]?: Maybe };
export type MakeMaybe = Omit & { [SubKey in K]: Maybe };
export type RequireFields = { [X in Exclude]?: T[X] } & { [P in K]-?: NonNullable };

... all types

export const AllChannelsDocument = {...} as unknown as DocumentNode;
```

My query:
```
export const ALL_CHANNELS = gql`
query allChannels {
allChannels {
id
name
}
}
`;
```

My functional component:
```
import { AllChannelsDocument } from './generated-type'
import { ALL_CHANNELS } from './operations.ts'

function ChannelList(): JSX.Element {
const test = useQuery(AllChannelsDocument);
return (
...
)
}
```

If I use ``useQuery(ALL_CHANNELS)``, it works but without type.
If I use ``useQuery(AllChannelsDocument)``, I can see the type showing, but it failed to run the React App.

Here is the error message
```
Failed to compile.

../generated-type.ts 6:7
Module parse failed: Unexpected token (6:7)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { GraphQLResolveInfo } from 'graphql';
| import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
> export type Maybe = T | null;
| export type InputMaybe = Maybe;
| export type Exact = { [K in keyof T]: T[K] };
```

I have searched stackoverflow and found that I should downgrade react-scripts to 4.0.1. I did but it doesn't help resolving the issue.

Package versions in root (monorepo)
```
"dependencies": {
"graphql": "^15.8.0",
"typescript": "^4.5.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.3.1",
"@graphql-codegen/introspection": "2.1.1",
"@graphql-codegen/typed-document-node": "^2.2.2",
"@graphql-codegen/typescript": "2.4.2",
"@graphql-codegen/typescript-operations": "2.2.2",
"@types/node": "^17.0.8"
}
```

Package versions in React App
```
"dependencies": {
"@apollo/client": "^3.5.6",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.1",
"shared": "*",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"
}
```

I couldn't find any requirement regarding compileOptions for your library to work with React. I wonder what is the cause of this issue? (btw, I had to downgrade graphql to v15 for it to work with your example)

Reproduce the React app build with react-scripts 4.0.1 and the shown generated-type.ts import. Start by inspecting the TypeScript declarations around the reported line and the generated AllChannelsDocument usage in the component, then compare the root and app package versions. Done means identifying the compatibility or configuration cause and documenting a verified way to compile and run the typed query.

Written by the indexing model from the issue text.