Demonstrate how to replace __DEV__ with false in production builds.

[benjamn]

When using a version of @apollo/client with apollographql/apollo-client#8347 applied, this configuration saves a whopping 3.73kB of minified+gzip code (due to removing development-only code) when running npm run build to generate an optimized production build, without requiring CRA ejection.

@hwillson @brainkim If we land apollographql/apollo-client#8347 for Apollo Client v3.4, this configuration will most likely be what we recommend to Create React App folks, so I'm open to any ways we might be able to simplify it further.

[DennieMello]

After installing version 3.4 in Next Js, when building and running the application, the following errors occur. How can you fix them?

When using a version of @apollo/client with apollographql/apollo-client#8347 applied, this configuration saves a whopping 3.73kB of minified+gzip code (due to removing development-only code) when running npm run build to generate an optimized production build, without requiring CRA ejection.

@hwillson @brainkim If we land apollographql/apollo-client#8347 for Apollo Client v3.4, this configuration will most likely be what we recommend to Create React App folks, so I'm open to any ways we might be able to simplify it further.

[benjamn]

@DennieMello Any chance you can reproduce this problem without minification? I think I recognize the admit stack frame on top, but it would be great to know the rest.

It looks like window.__DEV__ does end up getting defined, but perhaps __DEV__ is used for the first time before it's defined.

As a workaround, you should be able to set window.__DEV__ yourself before importing anything from @apollo/client.

[benjamn]

I think this problem may be fixed by apollographql/apollo-client#8558 (coming soon).

[benjamn]

@DennieMello Alright, if this is indeed the same problem, it should be fixed in @apollo/client@3.4.1 (just published). Thanks for being the first to let us know about this problem!

[DennieMello]

@DennieMello Alright, if this is indeed the same problem, it should be fixed in @apollo/client@3.4.1 (just published). Thanks for being the first to let us know about this problem!

Thank you for such a quick response! Problem solved, everything works well

[tubbo]

I'm using Webpack 5 and Electron, but I still see this __DEV__ error happening when I apply the configuration from this PR.

Here's my plugins:

[
  new ForkTsCheckerWebpackPlugin(),
  new ProvidePlugin({
    process: 'process/browser',
  }),
  new DefinePlugin({
    'process.env': JSON.stringify({ ...DEFAULT_CONFIG, ...process.env }),
    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
  }),
]

But I can't get past this error:

[benjamn]

@tubbo Any chance you can capture that in a runnable reproduction, in a new issue?

That error doesn't look quite the same as

ReferenceError: __DEV__ is not defined

from above, so I'd like to understand what's really happening. Thanks!