Unable to build Next.js with generated client library

[kotx]

Describe the bug
When using the generated client library from npx edgeql-js, running next build results in this error:

./dbschema/edgeql-js/syntax/toEdgeQL.ts:1025:14
Type error: Function declarations are not allowed inside blocks in strict mode when targeting 'ES3' or 'ES5'. Modules are automatically in strict mode.

  1023 |     )} ${clause.join("")})`;
  1024 |   } else if (expr.__kind__ === ExpressionKind.Group) {
> 1025 |     function isGroupingSet(arg: any): arg is GroupingSet {
       |              ^
  1026 |       return arg.__kind__ === "groupingset";
  1027 |     }
  1028 | 

Reproduction

I made a repository with the same error here: https://github.com/kotx/edgedb-nextjs-repro

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "downlevelIteration": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Expected behavior
No build error occurs

**Versions

• OS: Alpine 3.16.0 on WSL
• EdgeDB version: 2.0
• edgedb-js version: 0.21.1
• pnpm 7.7.1, npm 8.15.0

Additional context
I tried to add dbschema/edgeql-js to the exclude array in tsconfig.json but it didn't affect the result.

[colinhacks]

Thanks, we'll look into this.

In the meantime you can change the target to "es6" without issue. Next.js only uses "es5" a very conservative default to support legacy browsers.

[redraskal]

Also, seems like node-fetch@2 is required with Next.js here?

edgedb-js/packages/driver/src/httpScram.ts

Line 40 in 438c9b2

const FETCH = typeof fetch === "undefined" ? require("node-fetch") : fetch;

Not entirely sure how the Next.js polyfill works, but the library does not seem to pick it up.

Edit: Additionally, it looks like Next.js is ignoring some typescript compiler options? (vercel/next.js#37271)

info  - Linting and checking validity of types ...Failed to compile.

./dbschema/edgeql-js/funcops.ts:331:8
Type error: Type 'Set<any>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

  329 |   }
  330 |   const descendants: string[] = [
> 331 |     ...new Set(
      |        ^
  332 |       [...typeSpec.values()]
  333 |         .filter(
  334 |           type =>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Neither downlevelIteration or target modifications in tsconfig resolve the error on Next.js 13.

[dotlouis]

Got the same issue here. I had to npm i -D node-fetch@2 encoding to make it work.

Related vercel/next.js#7621

[scotttrinh]

Related: #566

Looks like the issue with the target: es5 bit is something the Next.js team is working on, I've seen similar issues myself. I'll leave this open and keep an eye out for a fix landing there.