Next.js14集成TONConnectUIProvider报错：TypeError: (0 , N.createContext) is not a function

我正在使用Next.js 14、TypeScript和Telegram Open Network开发新应用，尝试在应用根节点使用TONConnectUIProvider时遇到问题。运行代码时出现错误：TypeError: (0 , N.createContext) is not a function。所有依赖均为最新版本（react "^18"、next "14.1"、tonconnect/ui-react "2.0.0"），我认为问题可能与版本兼容有关，或许TON Connect与Next.js 14适配不佳。

我的代码 #

layout.tsx #

import type { Metadata } from "next";
import React from "react";
import { Inter } from "next/font/google";
import Script from "next/script";
import "../styles/globals.css";
import Providers from "./providers/Providers";
import Head from "next/head";
import { Html, Main, NextScript } from "next/document";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Html lang="en">
      <Head>
        <meta
          httpEquiv="Cache-Control"
          content="no-cache, no-store, must-revalidate"
        />
        <meta httpEquiv="Pragma" content="no-cache" />
        <meta httpEquiv="Expires" content="0" />
        <Script
          src="https://telegram.org/js/telegram-web-app.js"
          strategy="beforeInteractive"
        />
      </Head>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </Html>
  );
}

Providers.tsx #

"use client";

import { TonConnectUIProvider } from "@tonconnect/ui-react";

const manifestUrl =
  "https://raw.githubusercontent.com/ton-community/tutorials/main/03-client/test/public/tonconnect-manifest.json";

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TonConnectUIProvider manifestUrl={manifestUrl}>
      {children}
    </TonConnectUIProvider>
  );
}

错误堆栈信息 #

TypeError: (0 , N.createContext) is not a function
    at 4786 (.next/server/app/page.js:1005:1028)
    at Function.t (.next/server/webpack-runtime.js:1:127)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/node_modules/next/dist/build/utils.js:919:21)
    at async /node_modules/next/dist/build/utils.js:1138:17
    at async Span.traceAsyncFn (/node_modules/next/dist/trace/trace.js:151:20)

> Build error occurred
Error: Failed to collect page data for /
    at /node_modules/next/dist/build/utils.js:1258:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

解决方案 #

1. 调整@tonconnect/ui-react版本 #

v2.0.0版本可能与React 18/Next.js 14存在打包冲突，尝试降级到v1.x稳定版，或者升级到最新预发布版本测试：

# 降级到v1.x
npm install @tonconnect/ui-react@^1.0.0
# 或尝试最新测试版
npm install @tonconnect/ui-react@beta

2. 强化客户端渲染边界 #

在根布局中用Suspense包裹Providers，避免服务器端渲染时加载TONConnect的客户端依赖：

// 修改layout.tsx中的body部分
import { Suspense } from 'react';

// ...
<body className={inter.className}>
  <Suspense fallback={<div>加载中...</div>}>
    <Providers>{children}</Providers>
  </Suspense>
</body>

3. 清理重复的React依赖 #

检查项目是否存在多个React版本：

npm ls react

如果发现重复，清理依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

4. 改用手动初始化方式 #

跳过TonConnectUIProvider，在客户端组件中手动初始化TONConnect：

// 新建TonConnectWrapper.tsx
"use client";
import { useEffect } from 'react';
import { TonConnectUI } from '@tonconnect/ui-react';

const manifestUrl = "你的manifest地址";

export default function TonConnectWrapper({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const tonConnectUI = new TonConnectUI({ manifestUrl });
    return () => tonConnectUI.destroy();
  }, []);

  return <>{children}</>;
}

之后在根布局中用该组件替代原Providers。

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