ReferenceError: __DEV__ is not defined using @apollo/client in Next.js _middleware after upgrading to Node@16

[SystemDisrupt]

Intended outcome: Call auth query with apollo client in Next.js _middleware via vercel Edge Function using Node@16

Actual outcome: When deployed to vercel I get the following error:

ReferenceError: __DEV__ is not defined
    at node_modules/.pnpm/@[email protected]_cd52a2e2ff1958b4ef767d2bf22947af/node_modules/@apollo/client/utilities/globals/index.js:5:0
    at node_modules/.pnpm/@[email protected]_cd52a2e2ff1958b4ef767d2bf22947af/node_modules/@apollo/client/utilities/globals/index.js:12:0
    at webpack/bootstrap:21:0
    at .:11:18
    at webpack/bootstrap:21:0
    at node_modules/.pnpm/[email protected]/node_modules/react/index.js:4:2
    at node_modules/.pnpm/[email protected]/node_modules/react/index.js:4:2
    at webpack/runtime/jsonp chunk loading:34:0

I tried updating to the latest version of React, Next.js, GraphQL and Apollo Client, but got the same error. I found a few issues around React 18, so downgraded back to 17.

How to reproduce the issue:

• Create Apollo client instance in Next.js ./pages/_middleware.ts
• Pass any GraphQL query
• Deploy app to Vercel
• View logs in Functions tab after trying to access the preview URL

Versions

  System:
    OS: macOS 11.6.5
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Firefox: 92.0.1
    Safari: 15.4
  npmPackages:
    @apollo/client: ^3.1.4 => 3.6.4
    storybook-addon-apollo-client: ^4.0.9 => 4.0.11

[jpvajda]

@SystemDisrupt Thanks for reporting this, There are certainly a lot of things at play here. I'm curious if you have opened an issue with Next.js on this as well, also by downgrading to React 17, did it work as expected? If you do have an issue open with Next.js feel free to link to this issue.

[zsotyooo]

👋 The same thing happens on Nuxt 3 (production build only). It probably has to do with SSR.

[websitevirtuoso]

I have the same error when implementing vite-ssg In my vuejs 3 project

[gygoo]

I have the same error in nuxt3

Stack: "nuxt": "^3.0.0-rc.11" "@nuxt3/apollo-module": "^0.1.1",

Nuxi 3.0.0-rc.11 ℹ Node.js version: 16.14.0 ℹ Preset: node-server ℹ Working dir: .output ℹ Loading .env. This will not be loaded when running the server in production. ℹ Starting preview command: node ./server/index.mjs

Listening http://[::]:3000 [nuxt] [request error] [unhandled] [500] DEV is not defined at createHttpLink (./server/chunks/app/server.mjs:4252:3)
at ./server/chunks/app/server.mjs:10723:22
at fn (./server/chunks/app/server.mjs:238:27)
at Object.callAsync (./server/node_modules/unctx/dist/index.mjs:49:19)
at callWithNuxt (./server/chunks/app/server.mjs:240:23)
at applyPlugin (./server/chunks/app/server.mjs:209:39)
at applyPlugins (./server/chunks/app/server.mjs:218:11)
at async createNuxtAppServer (./server/chunks/app/server.mjs:10843:7)
at async Object.renderToString (./server/node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19)
at async ./server/chunks/handlers/renderer.mjs:367:21

[ChrisPlease]

Reporting the same error in Sveltekit using @apollo/client/core

  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 105.0.3
    Safari: 16.0
  npmPackages:
    @apollo/client: ^3.7.0 => 3.7.0
    svelte-apollo: ^0.5.0 => 0.5.0

[Zila-itc]

// nuxt.config.ts or vite or webpack https://github.com/next-dev-team/nuxt3-antd/blob/5109b583669ec77b734100ba9c3c4f5eece8e117/nuxt.config.ts#L77

const isDev = process.env.NODE_ENV === "development";

define: {
    // fixed apollo client err
    __DEV__: isDev.toString(),
  }
  
  ,,,

[ffoerster]

I am also running into this problem on a production build of nuxt on 3.0.0-rc.13 / @apollo/client:3.7.1

// nuxt.config.ts or vite or webpack https://github.com/next-dev-team/nuxt3-antd/blob/5109b583669ec77b734100ba9c3c4f5eece8e117/nuxt.config.ts#L77

const isDev = process.env.NODE_ENV === "development";

define: {
    // fixed apollo client err
    __DEV__: isDev.toString(),
  }
  
  ,,,

Unfortunately this did not help.

EDIT: Have to revise my post. Defining the variable works - i just nested it wrong. Had it on the top level, while it obviously needs to be added to the vite {} node.

[Rezrazi]

Experiencing the same issue

Using it under an api route that uses next/og The og image generation work without the apollo query bit, and works in local dev envs with apollo as well.

• next 13.0.5
• @apollo/client 3.7.1

Snippet

const retrieve = async (id: string | null) => {
  if (!id) {
    return undefined
  }

  try {
    const { data } = await client.query<{ results: any[] }>({
      query: TEST_QUERY,
      variables: {
        id,
      },
    })

    return data
  } catch (e) {
    return undefined
  }
}

export default async function og(req: NextRequest) {
  try {
    const { searchParams } = new URL(req.url)

    const id = searchParams.get("id")

    const data = await retrieve(id)

    if (data === undefined) {
      return new Response(`Failed to generate the image`, {
        status: 500,
      })
    }

    return new ImageResponse(
      (
        <div
          style={{
            height: "100%",
            width: "100%",
            display: "flex",
            flexDirection: "column",
            backgroundImage: `url("${process.env.NEXT_PUBLIC_APP_URL}/og.png")`,
            backgroundSize: "1200px 630px",
            backgroundRepeat: "no-repeat",
          }}
        >
          /// CONTENT
      ),
      {
        width: 1200,
        height: 600,
      },
    )
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    })
  }
}

[GET] /api/og?id=<id>
22:56:09:14
ReferenceError: __DEV__ is not defined
    at node_modules/@apollo/client/utilities/globals/index.js:6:0
    at webpack/bootstrap:21:0
    at node_modules/@apollo/client/cache/inmemory/reactiveVars.js:65:0
    at webpack/bootstrap:21:0
    at node_modules/@vercel/og/dist/index.js:3:0
    at webpack/bootstrap:21:0
    at .:7:0
    at webpack/bootstrap:21:0
    at node_modules/zen-observable-ts/module.js:576:22
    at webpack/runtime/jsonp chunk loading:34:0
    

[alessbell]

Hi, @SystemDisrupt 👋 We have an alpha release with a change that should improve things here, you can install it with npm i @apollo/client@alpha or the package manager of your choice :) If you have a chance to test it out, would love to know if that helps!

[bignimbus]

Hi @SystemDisrupt 👋🏻 just wanted to follow up here - we are closing this issue as completed. Please do feel free to open a new issue if you continue to see this happening after trying npm i @apollo/client@alpha 🙏🏻

[marketsystems]

Hi, @SystemDisrupt 👋 We have an alpha release with a change that should improve things here, you can install it with npm i @apollo/client@alpha or the package manager of your choice :) If you have a chance to test it out, would love to know if that helps!

Alpha is no good for production servers though, the change works for me but it would be better if it wasnt "alpha!"

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.