<UI-REACT>: Modals missing when change locale (NextJS + next-intl)

[thanhhuyPG]

I have a problem with my application when implement @tonconnect/ui-react in nextjs + next-intl. Everything was fine until I changed the language and the connect wallet modal didn't show up anymore, even though the status of useTonConnectModal was "opened". It seems the tag disappeared when I changed the locale. Is there any way to fix this problem?

[abhiyana]

Are you getting errors like `Uncaught (in promise) Error: Operation aborted
at n.signal.addEventListener.once (641-3b7982b3beeccb69.js:14:7384)
at Y.e.addEventListener.once (641-3b7982b3beeccb69.js:14:5000)
at 641-3b7982b3beeccb69.js:14:6385
at Generator.next ()
at 641-3b7982b3beeccb69.js:14:486
at new Promise ()
at C (641-3b7982b3beeccb69.js:14:235)
at Object.dispose (641-3b7982b3beeccb69.js:14:6303)
at ee.pause (641-3b7982b3beeccb69.js:14:9782)
at 641-3b7982b3beeccb69.js:14:18802
n.signal.addEventListener.once @ 641-3b7982b3beeccb69.js:14
Y.e.addEventListener.once @ 641-3b7982b3beeccb69.js:14
(anonymous) @ 641-3b7982b3beeccb69.js:14
(anonymous) @ 641-3b7982b3beeccb69.js:14
C @ 641-3b7982b3beeccb69.js:14
dispose @ 641-3b7982b3beeccb69.js:14
pause @ 641-3b7982b3beeccb69.js:14
(anonymous) @ 641-3b7982b3beeccb69.js:14
pause @ 641-3b7982b3beeccb69.js:14
pauseConnection @ 641-3b7982b3beeccb69.js:27
(anonymous) @ 641-3b7982b3beeccb69.js:27
Promise.catch
(anonymous) @ 641-3b7982b3beeccb69.js:27Understand this error
www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b:1

   GET https://www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b net::ERR_CONNECTION_TIMED_OUTUnderstand this error

www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b:1

   `?

[Kishore56578]

i am

Are you getting errors like `Uncaught (in promise) Error: Operation aborted at n.signal.addEventListener.once (641-3b7982b3beeccb69.js:14:7384) at Y.e.addEventListener.once (641-3b7982b3beeccb69.js:14:5000) at 641-3b7982b3beeccb69.js:14:6385 at Generator.next () at 641-3b7982b3beeccb69.js:14:486 at new Promise () at C (641-3b7982b3beeccb69.js:14:235) at Object.dispose (641-3b7982b3beeccb69.js:14:6303) at ee.pause (641-3b7982b3beeccb69.js:14:9782) at 641-3b7982b3beeccb69.js:14:18802 n.signal.addEventListener.once @ 641-3b7982b3beeccb69.js:14 Y.e.addEventListener.once @ 641-3b7982b3beeccb69.js:14 (anonymous) @ 641-3b7982b3beeccb69.js:14 (anonymous) @ 641-3b7982b3beeccb69.js:14 C @ 641-3b7982b3beeccb69.js:14 dispose @ 641-3b7982b3beeccb69.js:14 pause @ 641-3b7982b3beeccb69.js:14 (anonymous) @ 641-3b7982b3beeccb69.js:14 pause @ 641-3b7982b3beeccb69.js:14 pauseConnection @ 641-3b7982b3beeccb69.js:27 (anonymous) @ 641-3b7982b3beeccb69.js:27 Promise.catch (anonymous) @ 641-3b7982b3beeccb69.js:27Understand this error www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b:1

   GET https://www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b net::ERR_CONNECTION_TIMED_OUTUnderstand this error

www.okx.com/tonbridge/discover/rpc/bridge/events?client_id=bade4c976454b2f8bf514535b311ef21e460a3050e0da51596049a470785106b:1

   `?

I am also facing the same issue

[China-JavaScript]

require 的问题

[yleilu]

The modal is supposed to be added to the div#tc-widget-root.
However, after the route changes, it is removed by the render process.

A workaround solution

'use client'

let memo

const WrappedProvider = props => {
  useEffect(() => {
    const found = document.getElementById('tc-widget-root')
    
    if (!memo) {
      memo = found
    } else if (!found) {
      document.body.appendChild(memo)
    }
  }, [])
  
  return <TonConnectUIProvider {...props} />
}

[GrayJyyyyy]

require 的问题

具体是什么问题导致的呢

[khalid-sani]

The modal is supposed to be added to the div#tc-widget-root. However, after the route changes, it is removed by the render process.

A workaround solution

'use client'

let memo

const WrappedProvider = props => {
useEffect(() => {
const found = document.getElementById('tc-widget-root')

if (!memo) {
  memo = found
} else if (!found) {
  document.body.appendChild(memo)
}

}, [])

return <TonConnectUIProvider {...props} />
}

This didn't work for me. Did anyone else manage to solve this issue? It doesn't work when the localization is different than the default/fallback localization