How to configure tsconfig.json to use Next.js together with Nexus?

[nikolasburk]

Cross-posting this issue from the nexus repository here: prisma-labs/graphql-framework-experiment#391

I have an example that combines GraphQL Nexus with Next.js, you can find it here: https://github.com/prisma/prisma-examples/tree/prisma2/typescript/graphql-nextjs

Now, I'm trying to invoke the Nexus generation via:

ts-node --transpile-only pages/api

Here is my makeSchema:

export const schema = makeSchema({
  types: [Query, Mutation, Post, User, GQLDate],
  outputs: {
    typegen: path.join(__dirname, 'nexus-typegen.ts'),
    schema: path.join(__dirname, 'schema.graphql')
  },
})

So, I'd expect that the Nexus generation outputs the two files nexus-typegen.ts and schema.graphql.

However, when I run the command I see this error:

$ npm run generate:nexus
> [email protected] generate:nexus /Users/nikolasburk/prisma/github/prisma-examples/typescript/graphql-nextjs
> ts-node --transpile-only pages/api
/Users/nikolasburk/prisma/github/prisma-examples/typescript/graphql-nextjs/pages/api/index.ts:1
import { idArg, makeSchema, objectType, stringArg, asNexusMethod } from 'nexus';
       ^
SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:703:23)
    at Module.m._compile (/Users/nikolasburk/.config/yarn/global/node_modules/ts-node/src/index.ts:493:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/nikolasburk/.config/yarn/global/node_modules/ts-node/src/index.ts:496:12)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:822:10)
    at Object.<anonymous> (/Users/nikolasburk/.config/yarn/global/node_modules/ts-node/src/bin.ts:158:12)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate:nexus: `ts-node --transpile-only pages/api`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] generate:nexus script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nikolasburk/.npm/_logs/2020-02-28T16_13_47_524Z-debug.log

I was able to fix the error with the help of this SO question, I needed to adjust the module in the compilerOptions of my tsconfig.json from esnext to commonjs to make this work.

However, when starting my Next.js app again, it autommatically overrides that setting to esnext again:

$ npm run dev

> [email protected] dev /Users/nikolasburk/prisma/github/prisma-examples/typescript/graphql-nextjs
> next

[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
The following changes are being made to your tsconfig.json file:
  - compilerOptions.target to be suggested value: es5 (this can be changed)
  - compilerOptions.module must be esnext (for dynamic import() support)

[ info ]  bundled successfully, waiting for typecheck results...
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:3000

I'm wondering how I should configure my tsconfig.json to use both Nexus and Next.js together?

[timneutkens]

ts-node --transpile-only pages/api

How does this trigger generation of Nexus? it would run pages/api/index.js right? 🤔

[nikolasburk]

When running this (in dev mode), Nexus generates the output files that are defined in the outputs argument in makeSchema, see in code here.

[vibhanshu909]

Any example available for how to use [email protected] in serverless, with NextJS, and deploying to vercel (previously known as zeit now) ?