ReferenceError: __DEV__ is not defined after update to 3.4.5 with Next.js app

[FlorentD]

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

[benjamn]

@FlorentD Can you share a stacktrace leading to the ReferenceError?

[FlorentD]

@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]

Hello @benjamn. I'm not sure if 3.4.9 should fix this problem (I guess) but we still have the same error.

[benjamn]

@FlorentD Same stack trace? Do you have (could you share) any code that imports from @apollo/client/link/http?

[FlorentD]

Hello @benjamn, I've setup a very tiny NextJS app to reproduce the bug : https://github.com/FlorentD/apollo-client-bug-exemple

You can see the built app with the bug (@apollo/client: 3.4.9) : https://apollo-client-bug-exemple.vercel.app/
And the same built app without the bug (@apollo/client: 3.4.4) : https://apollo-client-bug-exemple-oni54oegf-florentd.vercel.app/

By adding this import (which does nothing) I crash the app : https://github.com/FlorentD/apollo-client-bug-exemple/blob/d74160c71c1295ecccb2a303ceb957cce10fe97b/apollo/index.js#L2

Hope it helps !

[benjamn]

Thanks for the reproduction!

My hunch is that Parcel is doing some tree-shaking or scope hoisting that eliminates/reorders the code that polyfills __DEV__, but I will need to investigate to confirm.

We have this sideEffects setting in @apollo/client/utilities/package.json that's intended to help tree-shakers avoid pruning this code, but maybe that's not registering with Parcel the same as other bundlers.

Just so I don't leave you stuck without a workaround: if you define __DEV__ globally yourself before importing from @apollo/client, you won't have to deal with any of these problems.

[freshollie]

Also having this issue with webpack and @apollo/client/utilities

ReferenceError: __DEV__ is not defined
    at checkDocument (.../fresh-configurator/packages/configurator/build/webpack:/@betaflight/.yarn/__virtual__/@apollo-client-virtual-56b060ffe2/0/cache/@apollo-client-npm-3.4.9-dc343d7a0b-14877d78f3.zip/node_modules/@apollo/client/utilities/graphql/getFromAST.js:4:1)
    at getMainDefinition (.../fresh-configurator/packages/configurator/build/webpack:/@betaflight/.yarn/__virtual__/@apollo-client-virtual-56b060ffe2/0/cache/@apollo-client-npm-3.4.9-dc343d7a0b-14877d78f3.zip/node_modules/@apollo/client/utilities/graphql/getFromAST.js:43:1)
    at isSubscription 

[benjamn]

@FlorentD Thanks to your reproduction, I can confirm PR #8720 fixes the problem you were seeing! Please take a look when you have a chance. If everything looks good, those changes will probably get released in @apollo/client@3.4.10 (the next patch version).

Small (possibly obvious) note: in order to verify the fix, I had to delete the .next/ directory and rebuild, after installing a local copy of @apollo/client with PR #8720 applied.

[benjamn]

The problem seems fixed for me by @apollo/client@3.4.10, but I'll let @FlorentD and/or @freshollie confirm before I close the issue again. 🤞

[FlorentD]

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

[devlsh]

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

[lauraseidler]

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.

[benjamn]

@oyed @lauraseidler Could either of you provide a small runnable reproduction?

[mikecousins]

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

[eugene1g]

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.

[lauraseidler]

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.

[Arenukvern]

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>

[davidbarral]

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

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

[benjamn]

@davidbarral That sounds like the best solution ultimately, but I'm still hopeful we can make this work out-of-the-box with no configuration.

[dchenk]

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

@davidbarral's solution worked for me with this vite.config.ts file:

import { ConfigEnv, defineConfig } from 'vite';
import viteSSR from 'vite-ssr/plugin';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig((env: ConfigEnv) => ({
  plugins: [
    viteSSR(),
    reactRefresh()
  ],
  define: {
    '__DEV__': (env.mode === 'development').toString()
  },
}));

The relevant parts are that you need to pass a function to defineConfig and to specify the define object.

[davidbarral]

@davidbarral That sounds like the best solution ultimately, but I'm still hopeful we can make this work out-of-the-box with no configuration.

Yep, I hope so too 😃

[gunters63]

Using a define DEV in vite unfortunately doesn't work for me. One of my indirect dependencies (npm module warning) has a line like this:

var __DEV__ = process.env.NODE_ENV !== 'production';

which of course breaks the build:

[commonjs] Unexpected keyword 'false' (17:4) in D:/proj/AtlasCopco/EnsoUi/node_modules/.pnpm/warning@4.0.3/node_modules/warning/warning.js

The workaround with defining DEV in index.html works fine.

[benjamn]

Alright, @lauraseidler's reproduction from #8674 (comment) (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.

[mikecousins]

Confirmed working for us, thanks.

[FlorentD]

…and still work on Next.js! :-D

[benjamn]

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.

[alanquigley-toast]

I noticed some strange behaviour around fastRefresh, tracked down to #7952, but this seemed to be fixed already?. Turns out DEV always returns false, so the fastRefresh fix is never applied.

We have a micro-frontend architecture, its possible during development that two applications with their own versions of Apollo can be on a page at the same time. Would this cause DEV to be set to false, Im struggling to find the any point where DEV gets set.

[loick]

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 🙏