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

[nikolasburk]

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?

[adnanfuat]

same problem

[JstnEdr]

I had the same problem. I was able to get both nexus and nextjs working together by adding an additional config file that would be used by nexus. I called mine nexus.tsconfig.json. The problem is that Nextjs will always overwrite what's in tsconfig.json--just let nextjs do it's thing ;) You'll also need to update your package.json.

Add new config file nexus.tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Then update the script in your package.json to use the new config file:

...
scripts: {
   ...
    "generate:nexus": "ts-node --transpile-only -P nexus.tsconfig.json src/pages/api",
  ...
}
...

Related: https://github.com/zeit/next.js/issues/7361