sdk
sdk copied to clipboard
[UI-REACT]: usage with `preact` leads to `cannot read properties of undefined` of `ReactSharedInternals.ReactCurrentOwner.current`
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
- 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