[Turbopack] : GraphQL with turbopack

[MersadHabibi]

Link to the code that reproduces this issue

https://github.com/MersadHabibi/template-fullstack-nextjs-graphql

To Reproduce

1. run npm run dev
2. open /api/graphql route
3. see error

Current vs. Expected behavior

I was creating a template and ran into trouble with turbopack.

Apollo Studio loads correctly when I don't use turbopack, but when use turbopack i get this error

{
  "errors": [
    {
      "message": "module.require is not a function",
      "extensions": {
        "code": "INTERNAL_SERVER_ERROR",
        "stacktrace": [
          "TypeError: module.require is not a function",
          "    at createHash (C:\\Users\\kimya\\Desktop\\templates\\test\\.next\\server\\chunks\\node_modules_9a9996._.js:4182:23)",
          "    at Object.html (C:\\Users\\kimya\\Desktop\\templates\\test\\.next\\server\\chunks\\node_modules_@apollo_server_dist_4d2543._.js:2381:247)",
          "    at ApolloServer.executeHTTPGraphQLRequest (C:\\Users\\kimya\\Desktop\\templates\\test\\.next\\server\\chunks\\node_modules_@apollo_server_dist_4d2543._.js:1948:77)"
        ]
      }
    }
  ]
}

Landing page `html` function threw: TypeError: module.require is not a function

this is my repo link
link

Provide environment information

Node.js v20.15.0

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 12072
  Available CPU cores: 8
Binaries:
  Node: 20.15.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

its only happen on development mode with turbopack

route.ts

import { ApolloServer } from "@apollo/server";
import {
  ApolloServerPluginLandingPageLocalDefault,
  ApolloServerPluginLandingPageProductionDefault,
} from "@apollo/server/plugin/landingPage/default";
import { startServerAndCreateNextHandler } from "@as-integrations/next";
import { PrismaClient } from "@prisma/client";
import fs from "fs";
import {
  DateTimeTypeDefinition,
  PositiveFloatTypeDefinition,
  PositiveIntTypeDefinition,
  URLTypeDefinition,
} from "graphql-scalars";
import { NextRequest } from "next/server";
import path from "path";
import resolvers from "./resolvers";

let typeDefs = "";

let plugins = [];
if (process.env.NODE_ENV === "production") {
  typeDefs = fs.readFileSync(
    path.join(path.resolve(), "./src/app/api/graphql/schema.graphql"),
    "utf-8",
  );

  plugins = [
    ApolloServerPluginLandingPageProductionDefault({
      embed: true,
      graphRef: "mersad.up@gmail.com",
    }),
  ];
} else {
  typeDefs = fs.readFileSync("./src/app/api/graphql/schema.graphql", "utf8");

  plugins = [ApolloServerPluginLandingPageLocalDefault({ embed: true })];
}

const server = new ApolloServer({
  typeDefs: [
    typeDefs,
    DateTimeTypeDefinition,
    PositiveIntTypeDefinition,
    PositiveFloatTypeDefinition,
    URLTypeDefinition,
  ],
  resolvers: {
    ...resolvers,
    // DateTimeResolver,
    // PositiveFloatResolver,
    // PositiveIntResolver,
    // URLResolver,
  },
  plugins,
});

const handler = startServerAndCreateNextHandler<NextRequest>(server, {
  context: async (req) => {
    const prisma = new PrismaClient();

    prisma.$connect();

    return {
      req,
      prisma,
    };
  },
});

export async function GET(request: NextRequest) {
  return handler(request);
}

export async function POST(request: NextRequest) {
  return handler(request);
}

[MersadHabibi]

@tylerjbainbridge no, just disable turbopack

[sam-btrt]

I've been trying to investigate this more as our non-turbo next dev performance is almost unusable, and this is what's blocking us from finally switching to turbopack.

I noticed that the test suite in https://areweturboyet.com/dev includes some examples with apollo server, so I tried pulling https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client to see if I could repro.

The example there does indeed work, but when I switched it from using the pages router to the app router for the graphql api, with no other changes, it gives the TypeError: module.require is not a function error.

So it seems this issue is limited to the app router specifically.

Would anyone on the turbopack/nextjs team be able to provide any pointers on whether this combination (Apollo Server + app router + turbopack) is expected to work?

[MersadHabibi]

Fixed on @apollo/server@4.11.3
apollographql/apollo-server#8004

[MersadHabibi]

New error

 ⨯ uncaughtException: TypeError: The "payload" argument must be of type object. Received null
    at frame (node_modules\next\src\server\patch-error-inspect.ts:89:42)
    at getSourcemappedFrameIfPossible (node_modules\next\src\server\patch-error-inspect.ts:179:32)
    at parseAndSourceMap (node_modules\next\src\server\patch-error-inspect.ts:234:23)
    at exit (node_modules\next\src\server\patch-error-inspect.ts:224:32)
    at apply (webpack://next/dist/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js:569:32)
    at apply (webpack://next/dist/compiled/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js:593:32)
    at error (node_modules\next\src\server\lib\start-server.ts:300:18) {
  code: 'ERR_INVALID_ARG_TYPE'
}

apollographql/apollo-server#8004