I am developing a new application with Next.js 14, TypeScript and Telegram Open Network. I am facing issues while trying to use the TONConnectUIProvider on the root of my app.
When I run my code I receive the following error:
TypeError: (0 , N.createContext) is not a function
What am I missing here? All my dependencies are up to date(latest, react "ˆ18", next "14.1" and tonconnect/ui-react "2.0.0"), but I believe that this issue involves versioning. Maybe TON Connect doesnt work perfectly with Next.js 14.
This is my layout.tsx file
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>
);
}
This is my Providers.tsx file:
"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>
);
}
Stack:
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'
}
What am I missing here?
It seems like the problem is related to a specific range of Next.js versions rather than an issue with TON Connect.
To resolve this, you have to update or rollback the NextJS version:
Next.js 14.0.1 or earlier — works
Related link https://github.com/ton-connect/sdk/issues/117