[UI-REACT], fix preact by changing rollup options

[T-Damer]

Related issue: https://github.com/ton-connect/sdk/issues/247

[kesha-antonov]

Please merge

[kesha-antonov]

For future googlers temp fix is:

package.json

"scripts": {
    "buildTonConnect": "cd node_modules/@tonconnect/ui-react/packages/ui-react && ../../../../.bin/vite build && cd ../../../../..",
    "postinstall": "patch-package && yarn buildTonConnect"
    ...
},
"dependencies": {
    "@tonconnect/ui": "^2.0.9",
    "@tonconnect/ui-react": "ton-connect/sdk#5155e53d208c8cf01aea16752d58f9012d9f7138",
    ...
},
"devDependencies": {
    "@vitejs/plugin-react": "^4.3.3",
    "typescript": "^5.6.3",
    "vite": "^5.4.9",
    "vite-plugin-dts": "^4.2.4",
    ...
}

patches/@tonconnect+ui-react+2.0.0.patch

diff --git a/node_modules/@tonconnect/ui-react/packages/ui-react/vite.config.ts b/node_modules/@tonconnect/ui-react/packages/ui-react/vite.config.ts
index ac65a58..8d8c2c7 100644
--- a/node_modules/@tonconnect/ui-react/packages/ui-react/vite.config.ts
+++ b/node_modules/@tonconnect/ui-react/packages/ui-react/vite.config.ts
@@ -35,11 +35,13 @@ export default defineConfig({
       }
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@tonconnect/ui'],
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', '@tonconnect/ui'],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          'react-dom/client': 'ReactDOMClient',
+          'react/jsx-runtime': 'ReactJSXRuntime',
           '@tonconnect/ui': 'TON_CONNECT_UI'
         }
       }

run yarn install

Change import ... from '@tonconnect/ui-react' to import ... from '@tonconnect/ui-react/packages/ui-react/lib/index.cjs'

[T-Damer]

I just: 1) Copied this repo, cd into folder 2) Changed roullupOption in vite.config.ts to:

rollupOptions: {
      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', '@tonconnect/ui'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react-dom/client': 'ReactDOMClient',
          'react/jsx-runtime': 'ReactJSXRuntime',
          '@tonconnect/ui': 'TON_CONNECT_UI'
        }
      }

3) Ran yarn build 4) Copied the output folder (/dist if I recall correctly) into my project (I used /lib directory) 5) Import everything I need, like this:

 import {
  useTonConnectUI,
  toUserFriendlyAddress,
  useTonWallet,
} from 'lib/ui-react'

PS: you may need to change tsconfig: "exclude": ["node_modules", "src/lib"]

[kodermax]

Why has this PR been pending for so long?