edgedb / edgedb-js

The official TypeScript/JS client library and query builder for EdgeDB
https://edgedb.com
Apache License 2.0
508 stars 65 forks source link

Unable to build Next.js with generated client library #401

Open kotx opened 2 years ago

kotx commented 2 years ago

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

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

colinhacks commented 2 years ago

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 commented 1 year ago

Also, seems like node-fetch@2 is required with Next.js here? https://github.com/edgedb/edgedb-js/blob/438c9b2ebb06a8165ef2dfc4bb0130aa3868cef4/packages/driver/src/httpScram.ts#L40 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? (https://github.com/vercel/next.js/issues/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 commented 1 year ago

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

Related https://github.com/vercel/next.js/issues/7621

scotttrinh commented 1 year ago

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.