Next.js中使用urql客户端出现reduceRight未定义属性读取错误

我在Next.js 13.4.7应用中使用urql 4.0.4 GraphQL客户端时，遇到了reduceRight相关错误，错误指向node_modules/urql/dist/client.js:1:4803，但无法定位具体原因。已确认：

• urql、graphql、zen-observable等依赖已安装并更新到最新版本
• GraphQL服务器（http://localhost:1337/graphql）正常运行可访问

_app.js 完整代码 #

import '@/styles/globals.css';
import { Provider, createClient } from "urql";

const client = createClient({ url: "http://localhost:1337/graphql" });

function MyApp({ Component, pageProps }) {
  return (
    <Provider value={client}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

项目依赖 #

"dependencies": {
  "eslint-config-next": "^12.0.4",
  "fast-json-stable-stringify": "^2.1.0",
  "graphql": "^16.7.1",
  "graphql-tag": "^2.12.6",
  "next": "13.4.7",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "ts-invariant": "^0.10.3",
  "urql": "^4.0.4",
  "zen-observable": "^0.10.0"
}

可能的解决方法 #

• 适配Next.js App Router（若使用App Router）
  urql v4针对Next.js 13的App Router有专属适配方案，若你使用的是App Router而非Pages Router，需调整配置：

  1. 安装适配包：

     npm install @urql/next
     

  2. 在app/providers.jsx创建客户端Provider：

     'use client';
     import { createClient, Provider } from '@urql/next';
     
     const client = createClient({
       url: 'http://localhost:1337/graphql',
     });
     
     export function UrqlProvider({ children }) {
       return <Provider value={client}>{children}</Provider>;
     }
     

  3. 在app/layout.jsx中引入该Provider：

     import { UrqlProvider } from './providers';
     
     export default function RootLayout({ children }) {
       return (
         <html lang="en">
           <body>
             <UrqlProvider>{children}</UrqlProvider>
           </body>
         </html>
       );
     }
     

• 降级urql版本
  urql v4与Next.js 13.4.x可能存在兼容性问题，可尝试降级到v3.x稳定版本：

  npm install urql@3.0.3
  

  降级后保持原_app.js配置即可。

• 对齐ESLint配置版本
  你的eslint-config-next版本（12.0.4）与Next.js版本（13.4.7）不匹配，可能引发编译异常，建议更新对齐：

  npm install eslint-config-next@13.4.7
  

• 清理缓存并重建项目
  清理缓存避免旧文件干扰：

  rm -rf .next node_modules package-lock.json
  npm install
  npm run build
  npm run dev
  

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