<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} />
}