Telegram API Question posted in
A comprehensive official documentation can be found here.

Telegram – TypeError: (0 , N.createContext) is not a function

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    you got the same error but with Material UI’s DataTable.

    DataTable makes use of React Context API, and such API is only available to client side components: https://beta.nextjs.org/docs/upgrade-guide#migrating-_documentjs-and-_appjs

    Adding ‘use client’; on top of the page fixed the error to me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search