Next.js升级至14.1后Apollo Client出现createElement导入错误

我将Next.js从14.0.4版本升级至14.1.0后，遇到了Apollo Client相关的createElement导入错误。经排查，问题出在客户端侧的Apollo Client实例化环节，且我严格遵循Next.js第三方包提供者指南完成了配置。

错误信息 #

Import trace for requested module:
./node_modules/@apollo/client/react/context/ApolloConsumer.js
./node_modules/@apollo/client/react/context/index.js
./node_modules/@apollo/client/react/index.js
./node_modules/@apollo/client/index.js
./src/lib/apolloClient.js
./src/components/providers.js
 ⨯ ./node_modules/@apollo/client/react/context/ApolloConsumer.js
Attempted import error: 'createElement' is not exported from 'react' (imported as 'React').

我的推测 #

该问题可能与Next.js的PR#60840（未正确使用useSearchParams时构建将失败）有关。

我的疑问 #

这是Apollo Client的内部构建问题吗？他们是否需要修复相关代码？我知道Next.js本次更新涉及Turbopack，还是说问题出在我拆分客户端与服务端逻辑的方式上？此前版本并未出现该问题，我怀疑是Next.js新版本导致的。

相关代码 #

app/layout.js #

import React from "react"
import Providers from "../components/providers"

export default function RootLayout({
  // Layouts must accept a children prop.
  // This will be populated with nested layouts or pages
  children,
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

components/providers.js #

"use client"
import React from "react"
import { useApollo, ApolloClientProvider } from "../lib/apolloClient"

function Providers({ children }) {
  return (
      <ApolloClientProvider>
        {children}
      </ApolloClientProvider>
  )
}

export default Providers

lib/apolloClient.js #

"use client"

import React, {
  useMemo,
  createContext,
  useContext,
  useState,
  useEffect,
} from "react"
import { ApolloClient, createHttpLink, from, ApolloProvider } from "@apollo/client"
import { setContext } from "@apollo/client/link/context"
import { onError } from "@apollo/client/link/error"
// Create a provider for the Apollo client context
export const ApolloClientProvider = ({ children }) => {
  // Maintain the JWT in a state
  const [jwt, setJwt] = useState(null)

  const refreshClient = async () => {
    const token = await getAccessJwtToken()
    setJwt(token)
  }

  // refresh client when jwt changes
  useEffect(() => {
    refreshClient()
  }, [jwt])

  const apolloClient = useMemo(() => createApolloClient(jwt), [jwt])

  return (
    <ApolloClientContext.Provider value={{ refreshClient }}>
      <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
    </ApolloClientContext.Provider>
  )
}

内容的提问来源于stack exchange，提问作者Nick