apollo-client: `ReferenceError: DEV is not defined` after update to `3.4.5` with `Next.js` app

Intended outcome: After updating to 3.4.5, on our Next.JS@11.1.0 app, we expect that our app launch with any problem.

Actual outcome: On our production bundle (everything works fine on dev mode), we got this message on runtime ReferenceError: __DEV__ is not defined. We had the same problem with the 3.4.0, but it has been fixed on 3.4.1 following this issue #8557. Something may have changed between 3.4.4 and 3.4.5, and still here on 3.4.8.

How to reproduce the issue: Our repo is private but let me know if you want me to setup a simple exemple with NextJS / Apollo to have some tests. We have this problem on our every nextJS app using @apollo/client>3.4.4.

Versions

 System:
    OS: macOS 11.5.2
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 91.0.1
    Safari: 14.1.2
  npmPackages:
    @apollo/client: 3.4.5 => 3.4.5

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 28 (9 by maintainers)

Commits related to this issue

Fix #8674 by polyfilling __DEV__ upon @apollo/client/link/http import. — committed to apollographql/apollo-client by benjamn 3 years ago
downgrade apollo client because of bug see https://github.com/apollographql/apollo-client/issues/8674 — committed to RopeScore/app by swantzter 3 years ago
Guide tree-shaking by calling checkDEV() in utilities/globals/index.ts. Actually using `checkDEV` by calling it (instead of just re-exporting it) appears to fix the reproduction provided in this comm... — committed to apollographql/apollo-client by benjamn 3 years ago
Fix __DEV__ bug cf https://github.com/apollographql/apollo-client/issues/8674#issuecomment-917272570 — committed to MTES-MCT/trackdechets by Riron 2 years ago

Most upvoted comments

Hmm, I just found this issue - this just started happening to me after upgrading to v3.4.10 using Vite & Vue.

+12

oyed on Aug 28, 2021

Vite users can use a function in vite.config.js and set a define option:

export default ({ mode }) => ({
  define: {
    "__DEV__":  (mode === "development").toString(),
  },
});

+11

davidbarral on Sep 9, 2021

Yup, 3.4.10 blows up vite. I’ll see if I can work up a sandbox for it.

mikecousins on Aug 30, 2021

Hey @benjamn, here’s a reproduction: https://github.com/lauraseidler/vite-apollo-3.4.10 - I’ve had TypeScript in there at first, but removed it now - the problem appears either way.

lauraseidler on Sep 2, 2021

Hello @benjamn ! I can confirm @apollo/client@3.4.10 fix the problem on our apps. No crash anymore ! A BIG thank you !

FlorentD on Aug 28, 2021

Based on early feedback, I’m optimistic this is fixed now. Thanks to everyone for surfacing your issues and being patient while we iron out the kinks in this new __DEV__ system, especially as it relates to popular build tools. Closing now, but happy to reopen if similar issues persist.

benjamn on Sep 13, 2021

Same thing here: Vite (latest, 2.5.3), breaks the production build with 3.4.10 in it with the error ReferenceError: __DEV__ is not defined. It works fine in dev mode. Apollo Client 3.4.9 works well, so for now we’re staying on that version. Sorry, I don’t have a clean reproduction example, only a +1 for the topic.

@eugene1g I fixed vite error by defining DEV in index.html Tried to define it in main but with no result, it seems like vite removes it.

Hope it helps…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script>
      this['__DEV__'] = false
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Arenukvern on Sep 8, 2021

@benjamn sorry for the delay. With production build and sourcemaps I’ve got this :

index.js:416 ReferenceError: __DEV__ is not defined
    at g (createHttpLink.js:18)
    at Module.19487 (http.js:3)
    at r (bootstrap:21)
    at ?f000:5
    at route-loader.js:207

FlorentD on Aug 23, 2021

Confirmed working for us, thanks.

mikecousins on Sep 10, 2021

Alright, @lauraseidler’s reproduction from https://github.com/apollographql/apollo-client/issues/8674#issuecomment-911417247 (thanks for that!) seems to be fixed (by #8767), so I encourage everyone using Vite (or having similar problems with other bundlers) to try updating to @apollo/client@3.4.11 or @apollo/client@3.5.0-beta.12.

If #8767 turns out to be the full solution, this regression was due to aggressive tree-shaking by Vite, but was fixable on the Apollo Client side, so you shouldn’t need to configure anything to make it work now.

benjamn on Sep 10, 2021

Hi there, I’m still seeing this issue on Next13, using the “old” Next12 middlewares on Vercel. Do you have any workaround for this?

Thanks 🙏

loick on Jan 15, 2023

…and still work on Next.js! 😄

FlorentD on Sep 11, 2021

Same issue here, the upgrade to 3.4.10 causes the issue for me, using Vite & React, also only in production builds. 3.4.9 is fine.

lauraseidler on Aug 30, 2021

apollo-client: `ReferenceError: __DEV__ is not defined` after update to `3.4.5` with `Next.js` app

About this issue

Commits related to this issue

Most upvoted comments

apollo-client: `ReferenceError: DEV is not defined` after update to `3.4.5` with `Next.js` app