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