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

SystemDisrupt · 2022-05-23T20:56:01Z

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

The text was updated successfully, but these errors were encountered:

jpvajda · 2022-06-03T01:56:27Z

@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 · 2022-09-14T12:01:33Z

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

websitevirtuoso · 2022-10-09T07:37:01Z

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

gygoo · 2022-10-11T18:19:24Z

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 · 2022-10-16T13:52:21Z

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 · 2022-10-25T06:56:33Z

// 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 · 2022-11-11T13:40:53Z

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 · 2022-12-03T22:00:59Z

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 · 2023-02-07T16:43:12Z

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 · 2023-02-13T20:08:53Z

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 · 2023-02-14T18:16:33Z

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 · 2023-03-17T00:21:45Z

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.

jpvajda added 🔍 investigate Investigate further 🏓 awaiting-contributor-response requires input from a contributor labels Jun 3, 2022

jpvajda removed the 🏓 awaiting-contributor-response requires input from a contributor label Oct 10, 2022

jpvajda assigned alessbell Dec 5, 2022

alessbell removed their assignment Dec 5, 2022

phryneas self-assigned this Feb 3, 2023

bignimbus closed this as completed Feb 13, 2023

tanner-reits mentioned this issue Feb 27, 2023

bug: Missing variable in hydration app ionic-team/stencil#4076

Closed

3 tasks

github-actions bot locked as resolved and limited conversation to collaborators Mar 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

SystemDisrupt commented May 23, 2022

jpvajda commented Jun 3, 2022

zsotyooo commented Sep 14, 2022

websitevirtuoso commented Oct 9, 2022

gygoo commented Oct 11, 2022

ChrisPlease commented Oct 16, 2022

Zila-itc commented Oct 25, 2022 •

edited

Loading

ffoerster commented Nov 11, 2022 •

edited

Loading

Rezrazi commented Dec 3, 2022 •

edited

Loading

alessbell commented Feb 7, 2023

bignimbus commented Feb 13, 2023

marketsystems commented Feb 14, 2023

github-actions bot commented Mar 17, 2023

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

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

Comments

SystemDisrupt commented May 23, 2022

jpvajda commented Jun 3, 2022

zsotyooo commented Sep 14, 2022

websitevirtuoso commented Oct 9, 2022

gygoo commented Oct 11, 2022

ChrisPlease commented Oct 16, 2022

Zila-itc commented Oct 25, 2022 • edited Loading

ffoerster commented Nov 11, 2022 • edited Loading

Rezrazi commented Dec 3, 2022 • edited Loading

alessbell commented Feb 7, 2023

bignimbus commented Feb 13, 2023

marketsystems commented Feb 14, 2023

github-actions bot commented Mar 17, 2023

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

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

Zila-itc commented Oct 25, 2022 •

edited

Loading

ffoerster commented Nov 11, 2022 •

edited

Loading

Rezrazi commented Dec 3, 2022 •

edited

Loading