Error on building Next JS project with @apollo/client in the dependency tree

[svetliomihailov]

Intended outcome:

I'm using Next JS with Apollo and until today the next build command was a success.

Actual outcome:

Today upon building the application I got the following error:

> Build error occurred
TypeError: utilities.maybe is not a function
    at Object.<anonymous> (/usr/src/app/node_modules/@apollo/client/link/http/http.cjs.js:178:29)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/usr/src/app/node_modules/@apollo/client/core/core.cjs.js:9:12)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) {
  type: 'TypeError'
}
error Command failed with exit code 1.

How to reproduce the issue:

The setup is a NextJS application with @apollo/hooks. Bellow there is some example code from the application:

import React from "react";
import fetch from "cross-fetch";
import { ApolloProvider } from "@apollo/react-hooks";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

const buildClient = (url) =>
  new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({ uri: url, fetch: fetch }),
  });

const GraphQLProvider = ({ gqlHost, children }) => (
  <ApolloProvider client={buildClient(gqlHost)}>{children}</ApolloProvider>
);

export default GraphQLProvider;

And in a component wrapped in the GraphQLProvider a query is used like so:

...
const { data, loading, error } = useQuery(....);
...

Versions

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.15.0 - ~/.asdf/installs/nodejs/14.15.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/.asdf/installs/nodejs/14.15.0/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 78.14.0esr
  npmPackages:
    @apollo/react-hooks: 4.0.0 => 4.0.0 
    apollo-cache-inmemory: 1.6.6 => 1.6.6 
    apollo-client: 2.6.10 => 2.6.10 
    apollo-link-http: 1.5.17 => 1.5.17 

NextJS version I'm using is 10.0.9 React version ^16.13.1

[svetliomihailov]

A vary hacky way around the issue was adding custom resolutions in the package.json file for the previous version of @apollo/client:

"resolutions": {
    "@apollo/react-hooks/@apollo/client": "3.4.11",
    "raketa-next-client/@apollo/react-ssr/@apollo/client": "3.4.11"
  }

It turned out there @apollo/react-ssr as nested dependency which also uses the latest version of @apollo/client.

[oskari]

I'm suddenly having this same error when running my tests on a CRA project using @apollo/client

FAIL  src/Features/User/Pages/LoginPage.test.tsx
● Test suite failed to run

TypeError: utilities.maybe is not a function

  4 |
  5 | import { CssBaseline, MuiThemeProvider } from '@material-ui/core'
> 6 | import { ApolloProvider } from '@apollo/client/react'
    | ^
  7 | import '@fontsource/roboto'
  8 | import { client } from 'Util/ApiClient'
  9 | import Theme from 'Util/theme'

  at Object.<anonymous> (node_modules/@apollo/client/link/http/createHttpLink.js:15:19)
  at Object.<anonymous> (node_modules/@apollo/client/core/core.cjs.js:9:12)
  at Object.<anonymous> (node_modules/@apollo/client/main.cjs.js:5:12)
  at Object.<anonymous> (node_modules/@apollo/client/utilities/utilities.cjs.js:10:10)
  at Object.<anonymous> (node_modules/@apollo/client/react/context/context.cjs.js:7:17)
  at Object.<anonymous> (node_modules/@apollo/client/react/react.cjs.js:6:15)
  at Object.<anonymous> (src/setupTestsRenderer.tsx:6:1)
  at Object.<anonymous> (src/Features/User/Pages/LoginPage.test.tsx:2:1)

edit. I don't get the error when I downgrade to @apollo/client@3.4.10

[vdineva]

@oskari I'm seeing similar issues as well on the latest version (3.4.12). In my case importing ApolloProvider from '@apollo/client' as per the official documentation resolved my issue.

[benjamn]

Given the narrow version range and the nature of the problem, I'm hopeful #8817 will be the answer. I'll have a new @apollo/client version for you to try shortly!

[benjamn]

Please try @apollo/client@3.4.13 (which includes #8817) when you have a chance!

[svetliomihailov]

@benjamn thank you very much for the super quick response! I tried the new version and it is working :)

[VytasMule]

I still see the same error even after using "@apollo/client": "^3.4.13" :( My other apollo dependencies are: "@apollo/link-error": "^2.0.0-beta.3" "@apollo/react-ssr": "^4.0.0"

[benjamn]

@VytasMule Do you see any other versions if you do npm ls @apollo/client? Maybe try removing your .next/ directory and rebuilding (just in case)?

[VytasMule]

I removed .next/ with node_modules/ before building but it still fails.

After running npm ls @apollo/client I can see that I have a couple of dependencies: @keystone-next/fields@4.1.1 @apollo/link-error@2.0.0-beta.3 @apollo/react-ssr@4.0.0 @keystone-next/admin-ui@8.0.2 @keystone-next/cloudinary@2.0.9

[VytasMule]

Okay, I finally fixed it.

The problem was I had my library as "@apollo/client": "^3.4.13" not as "@apollo/client": "3.4.13". ^ made all the difference :)

[benjamn]

Ahh yes, that's a good reminder of something I keep learning and then forgetting: having "some-package": "^3.4.13" in your dependencies does not force npm to upgrade some-package from an earlier 3.4.x (x < 13) patch version, because the ^ notation allows any version that's minor/patch-compatible with the requested version (including earlier minor/patch versions).