Node modules broken When using Vite + React + Apollo Client

Question

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.

Answer 1

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"
  }