'useRef' is not exported from 'react'

[jurredejongh]

Hi!

Since we updated @apollo/client to 3.9.1 and @apollo/experimental-nextjs-app-support to 0.7.1 we get the following error in Next.js when either building or using dev:

> next build

   ▲ Next.js 14.0.4
   - Environments: .env.local

Failed to compile.

./node_modules/@apollo/client/react/hooks/internal/useLazyRef.js
Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/@apollo/client/react/hooks/internal/useLazyRef.js
./node_modules/@apollo/client/react/hooks/internal/index.js
./node_modules/@apollo/client/react/hooks/useFragment.js
./node_modules/@apollo/client/react/hooks/index.js
./node_modules/@apollo/client/react/index.js
./node_modules/@apollo/client/index.js
./src/apollo.ts
./src/app/..../actions.ts
./src/app/..../layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=..../page.tsx?__next_edge_ssr_entry__

> Build failed because of webpack errors
   Creating an optimized production build  .

The apollo.ts file only contains this:

import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc'

export const { getClient } = registerApolloClient(() => {
  const authLink = setContext(async (_, { headers, token }) => {
    return {
      headers: {
        ...headers,
        ...(token ? { authorization: `Bearer ${token}` } : {}),
      },
    }
  })

  const httpLink = new HttpLink({
    uri: process.env.ROUTER_URL ?? 'http://127.0.0.1:4000',
    credentials: 'same-origin',
  })

  return new ApolloClient({
    cache: new InMemoryCache(),
    link: ApolloLink.from([authLink, httpLink]),
  })
})

It looks like the useRef is called in RSC since the latest version. I don't know if this is the correct repo for this error or that I need to be over at @apollo/client.

Anyone knows what is happening different?

--

There are no issues when using @apollo/client@3.9.0-beta.0 and @apollo/experimental-nextjs-app-support@0.5.2.

[jerelmiller]

Hey @jurredejongh 👋

Thanks for the report! Apologies for the error! We had released a change in 3.8.9 that didn't get switched over to the proper import when we pulled it into our 3.9 release. I've opened https://github.com/apollographql/apollo-client/pull/11552 which should fix this issue. Can you try the snapshot release to double check this fixes your issue?

npm i @apollo/client@0.0.0-pr-11552-20240201141556

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[phryneas]

This will be released in a few minutes as @apollo/client 3.9.2 - if that doesn't fix the problem, please feel free to reopen this issue :)

[benjaffe]

@phryneas I'm seeing a maybe related error (using 3.9.2 as well as earlier versions ... this log is using 3.9.2):

 ⨯ ../node_modules/@apollo/client/react/context/ApolloConsumer.js
Attempted import error: 'createElement' is not exported from 'rehackt' (imported as 'React').

Any chance this is a similar issue with an import needing to be updated somewhere?

[phryneas]

@benjaffe that's likely a different problem. Could you please open a new issue with a reproduction?