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

[T-Damer]

Related issue: #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?

[krivochenko]

@T-Damer firstly thank you for your efforts. But I did as you described and got following errors on the step of yarn build

src/components/TonConnectUIProvider.tsx:8:8 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

8 } from '@tonconnect/ui';
         ~~~~~~~~~~~~~~~~

src/components/TonConnectUIProvider.tsx:9:34 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

9 import type { ITonConnect } from '@tonconnect/ui';
                                   ~~~~~~~~~~~~~~~~

src/errors/ton-connect-ui-react.error.ts:1:35 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

1 import { TonConnectUIError } from '@tonconnect/ui';
                                    ~~~~~~~~~~~~~~~~

src/hooks/useTonAddress.ts:1:46 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

1 import { CHAIN, toUserFriendlyAddress } from '@tonconnect/ui';
                                               ~~~~~~~~~~~~~~~~

src/hooks/useTonConnectModal.ts:1:49 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

1 import { WalletsModal, WalletsModalState } from '@tonconnect/ui';
                                                  ~~~~~~~~~~~~~~~~

src/hooks/useTonConnectUI.ts:3:51 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

3 import { TonConnectUI, TonConnectUiOptions } from '@tonconnect/ui';
                                                    ~~~~~~~~~~~~~~~~

src/hooks/useTonWallet.ts:2:67 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

2 import { ConnectedWallet, Wallet, WalletInfoWithOpenMethod } from '@tonconnect/ui';
                                                                    ~~~~~~~~~~~~~~~~

src/index.ts:2:15 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

2 export * from '@tonconnect/ui';
                ~~~~~~~~~~~~~~~~

src/utils/errors.ts:1:30 - error TS2307: Cannot find module '@tonconnect/ui' or its corresponding type declarations.

1 import { TonConnectUI } from '@tonconnect/ui';
                               ~~~~~~~~~~~~~~~~


Found 9 errors in 8 files.

Errors  Files
     2  src/components/TonConnectUIProvider.tsx:8
     1  src/errors/ton-connect-ui-react.error.ts:1
     1  src/hooks/useTonAddress.ts:1
     1  src/hooks/useTonConnectModal.ts:1
     1  src/hooks/useTonConnectUI.ts:3
     1  src/hooks/useTonWallet.ts:2
     1  src/index.ts:2
     1  src/utils/errors.ts:1
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What I do wrong?

[krivochenko]

Can someone of owner of this repo provide feedback? What should we do in this situation? Should we continue to use crutches, stop using preact, fork this repo?

[thekiba]

We've just released @tonconnect/[email protected] with preact support via PR #330. This update should resolve the compatibility issues you reported.

Please update to the latest version and let us know if you encounter any issues with the update.