sdk icon indicating copy to clipboard operation
sdk copied to clipboard

[UI-REACT]: usage with `preact` leads to `cannot read properties of undefined` of `ReactSharedInternals.ReactCurrentOwner.current`

Open T-Damer opened this issue 5 months ago • 5 comments

Describe the bug

I just created a preact project and used the @tonconnect/ui-react:

import { TonConnectButton, TonConnectUIProvider } from '@tonconnect/ui-react'

export default function () {
  return (
    <TonConnectUIProvider
      manifestUrl="tonconnect-manifest.json"
    >
      <TonConnectButton />
    </TonConnectUIProvider>
  )
}

It leads to:

@tonconnect_ui-react.js?v=77482234:18856 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'current')

I inspected the source and found full the cause, it looks like this:

function jsxDEV(type, config, maybeKey, source, self2) {
  ...
  return ReactElement(type, key, ref, self2, source, ReactCurrentOwner.current, props); // error here
}

ReactCurrentOwner.current - causes the issue, it's created like:

var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;

Expected behavior

preact works fine with many react specific libraries, can we have a support for it? My project is written using preact, instead of plain react, can't spend time rewriting everything to enable the library

Current behavior

I have an error when I use the TonConnectUIProvider wrapper:

@tonconnect_ui-react.js?v=77482234:18856 Uncaught (in promise) 
TypeError: Cannot read properties of undefined (reading 'current')

Steps to Reproduce

  1. Just check my preproduction: https://codesandbox.io/p/sandbox/ton-preact-error-demo-5jqv8g

Environment

└─┬ @tonconnect/[email protected]
  └─┬ @tonconnect/[email protected]
    └─┬ @tonconnect/[email protected]
      ├── @tonconnect/[email protected]
      ├── @tonconnect/[email protected]
      └── @tonconnect/[email protected]
  • OS: any os with telegram mini app support
  • Any browser if TMA is turned off

Additional context

In my app I also wrap everything into SDKProvider from '@telegram-apps/sdk-react', but it doesn't affect the error, I also tried fixing by aliasing in vite.config.ts:

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
      'react/jsx-runtime': 'preact/jsx-runtime'
    }
  }
});

It didn't help, also tried redefining global object:

  window.React = {
    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
      ReactCurrentOwner: {
        current: { something: 'hello' }
      }
    }
  };

It didn't help either

T-Damer avatar Aug 30 '24 15:08 T-Damer