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.
2
Answers
This is caused by a
graphql
version update from yesterday. A new release to fix this is in the works, meanwhile you can downgradegraphql
to16.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
version16.7.1
.Not need to downgrade, it is fixed in
17.0.0-alpha.2
.Add this to your
package.json
: