Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

[Aurora3014]

Describe the bug

Expected behavior

The page should be rendered.

Current behavior

I installed @tonconnect/ui-react@2.0.6 with next.js 14.2.4, But when I use TonconnectUiProvider in layout, this error comes out.

Steps to Reproduce

Make new Nextjs project with 14.2.4 install @tonconnect/ui-react Use TonConnectUIProvider in Layout.tsx

Then this error comes out

Environment

"@tonconnect/ui-react": "^2.0.6",
"@next/bundle-analyzer": "^14.2.3",
"@next/third-parties": "^14.2.3",
"@sentry/nextjs": "^8",
"next": "^14.2.3",
"next-themes": "^0.3.0",
"nextjs-progressbar": "^0.0.16",
"nextjs-toploader": "^1.6.12",

Additional context

No response

[Aurora3014]

I just solved this problem on my own :) Do not install tonconnect-ui-react module with npm i. Copy all the sources from this repo https://github.com/DmitryKodolbenko/tonconnect-react goto src folder, and copy all files into your next js src folder. ("Attention, you should add "use client" to all the files in ton-connect.") then import components from that module.

Happy coding:)

[VanThuan76]

It's still not working, bro :(

Error: [TON_CONNECT_SDK_ERROR] TonConnectError Operation aborted

[broAir]

Having same issue with the nextjs

[0xDmitry]

Same issue, next.js

[0xDmitry]

@thekiba can you reopen this one?

[0xDmitry]

Nvm, found a solution. Just need to wrap TonConnectUIProvider by client component and make sure that you use TonConnectButton only inside client components as well.

[alexcraviotto]

Nvm, found a solution. Just need to wrap TonConnectUIProvider by client component and make sure that you use TonConnectButton only inside client components as well.

Can you share an example code snippet? I'm stucked on this problem.

[0xDmitry]

Nvm, found a solution. Just need to wrap TonConnectUIProvider by client component and make sure that you use TonConnectButton only inside client components as well.

Can you share an example code snippet? I'm stucked on this problem.

In the beginning of the file where you import TonConnectButton you need to add "use client" directive. Also you need to create your own TonConnectProvider that will work on the client, like this:

"use client"

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

const manifestUrl = "your URL"

export const TonConnectProvider = ({
  children,
}: {
  children: React.ReactNode
}) => (
  <TonConnectUIProvider manifestUrl={manifestUrl}>
    {children}
  </TonConnectUIProvider>
)

[alexcraviotto]

Nvm, found a solution. Just need to wrap TonConnectUIProvider by client component and make sure that you use TonConnectButton only inside client components as well.

Can you share an example code snippet? I'm stucked on this problem.

In the beginning of the file where you import TonConnectButton you need to add "use client" directive. Also you need to create your own TonConnectProvider that will work on the client, like this:

"use client"

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

const manifestUrl = "your URL"

export const TonConnectProvider = ({
  children,
}: {
  children: React.ReactNode
}) => (
  <TonConnectUIProvider manifestUrl={manifestUrl}>
    {children}
  </TonConnectUIProvider>
)

Thank you! In the end I created a ‘Root’ component to wrap it the way you said. Have a nice day!

[0xDmitry]

Nvm, found a solution. Just need to wrap TonConnectUIProvider by client component and make sure that you use TonConnectButton only inside client components as well.

Can you share an example code snippet? I'm stucked on this problem.

In the beginning of the file where you import TonConnectButton you need to add "use client" directive. Also you need to create your own TonConnectProvider that will work on the client, like this:

"use client"

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

const manifestUrl = "your URL"

export const TonConnectProvider = ({
  children,
}: {
  children: React.ReactNode
}) => (
  <TonConnectUIProvider manifestUrl={manifestUrl}>
    {children}
  </TonConnectUIProvider>
)

Thank you! In the end I created a ‘Root’ component to wrap it the way you said. Have a nice day!

Just be careful with "use client" directive. If you specify your root component as client all children will be client too recursively.