with-typescript-graphql example does not build

[X-Y]

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

16.3.1, 14.17.6, 12.22.6

What browser are you using?

N/A

What operating system are you using?

macOS Big Sur 11.4

How are you deploying your application?

next build

Describe the Bug

The example with-typescript-graphql does not build. Following error shows up:

yarn run v1.22.17
$ yarn codegen && next build
$ graphql-let
[ graphql-let ] Done processing 3 GraphQL documents.
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.10
Failed to compile.

./lib/resolvers.ts:1:10
Type error: Module '"*.graphqls"' has no exported member 'QueryResolvers'. Did you mean to use 'import QueryResolvers from "*.graphqls"' instead?

> 1 | import { QueryResolvers, MutationResolvers } from './type-defs.graphqls'
    |          ^
  2 | import { ResolverContext } from './apollo'
  3 | 
  4 | const userProfile = {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When replacing import { QueryResolvers, MutationResolvers } from './type-defs.graphqls' with import { QueryResolvers, MutationResolvers } from '../__generated__/__types__', another error shows up

yarn run v1.22.17
$ yarn codegen && next build
$ graphql-let
[ graphql-let ] Done processing 1/3 GraphQL documents.
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.10
Failed to compile.

./node_modules/next/dist/build/webpack/plugins/middleware-plugin.d.ts:8:26
Type error: ',' expected.

   6 |     version: 1;
   7 |     sortedMiddleware: string[];
>  8 |     clientInfo: [location: string, isSSR: boolean][];
     |                          ^
   9 |     middleware: {
  10 |         [page: string]: {
  11 |             env: string[];
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

By upgrading Typescript to "typescript": "^4.5.4",, the build process became successful.
yarn dev works out of the box with no problem

Expected Behavior

The build process should work out of the box.

So typescript version needs to be bumped.

It is unclear how import { QueryResolvers, MutationResolvers } from './type-defs.graphqls' should be fixed. Same error shows up in my IDE(webstorm).

To Reproduce

1. yarn create next-app --example with-typescript-graphql with-typescript-graphql-app
2. yarn build

[hbswift]

Is the solution here just to change the import to the generated types directory along with version upgrade?

[X-Y]

@hbswift Change the import to the generated types is a workaround, I believe there should be ways of importing from .graphqls files directly

[ubmit]

@X-Y Hey there! Could you clarify what you mean by "So typescript version needs to be bumped." on the "expected behavior" section, please? I didn't get it. I'd be glad to work on this issue after having this clear to me 🙌

[X-Y]

Hello @GuilhermedeAndrade, on that one basically just change typescript version to the latest stable version.

[ubmit]

Hello @GuilhermedeAndrade, on that one basically just change typescript version to the latest stable version.

Got it, thanks 👍

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.