Node modules broken When using Vite + React + Apollo Client

I tried @apollo/client with this starting apollo client document but wanted to use Vite instead of CRA. I imported the modules in main.jsx like this:

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  gql,
} from "@apollo/client/core";

const client = new ApolloClient({
  uri: "https://flyby-router-demo.herokuapp.com/",
  cache: new InMemoryCache(),
});

// ...

ReactDOM.createRoot(document.getElementById("root")).render(
  <ApolloProvider client={client}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>
);

and then my app crushed with this message

Uncaught SyntaxError: missing ) in parenthetical chunk-NWQ2EI35.js:1493:112

In "chunk-NWQ2EI35.js:1493:112" I could see this js code.

// node_modules/graphql/jsutils/instanceOf.mjs
var _globalThis$process;
var instanceOf = (
  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317

  // !!! THIS is the line #1493 !!!
  ((_globalThis$process = globalThis.process) === null || _globalThis$process === void 0 ? void 0 : _globalThis$"development") === "production" ? function instanceOf2(value, constructor) { 

  // ...

Source from node_modules/graphql/jsutils/instanceOf.js :

const instanceOf =
  /* c8 ignore next 6 */
  // FIXME: https://github.com/graphql/graphql-js/issues/2317
  ((_globalThis$process = globalThis.process) === null ||
  _globalThis$process === void 0
    ? void 0
    : _globalThis$process.env.NODE_ENV) === 'production'
    ? function instanceOf(value, constructor) {
        return value instanceof constructor;
      }
    : function instanceOf(value, constructor) {
        if (value instanceof constructor) {
          return true;
        }

    // ...

Seems _globalThis$process.env.NODE_ENV changed to _globalThis$"development", and this caused the problem.

I have no idea how to use apollo client with vite environment. Needed some helps based on your experiences.

This is caused by a graphql version update from yesterday. A new release to fix this is in the works, meanwhile you can downgrade graphql to 16.6.0.

Edit: this should be fixed with 16.7.1 now.

The same issue appeared in my project (Nuxt 3, Cloudflare Pages preset), even with graphql version 16.7.1.

Not need to downgrade, it is fixed in 17.0.0-alpha.2.

Add this to your package.json:

  "overrides": {
    "graphql": "^17.0.0-alpha.2"
  }