gram-js / gramjs

NodeJS/Browser MTProto API Telegram client library,
MIT License
1.29k stars 179 forks source link

Is it possible to use this with react-native (expo)? #504

Open VityaSchel opened 1 year ago

VityaSchel commented 1 year ago

Amazing work on this library, moved from @mtproto/core, but I couldn't run it in react-native environment because of the following error:

The package at "node_modules/telegram/CryptoFile.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library.

Can you add support for react-native?

painor commented 1 year ago

can you try using the browser build and see if it works? npm i telegram@browser

VityaSchel commented 1 year ago

can you try using the browser build and see if it works? npm i telegram@browser

I tried installing version with browser tag, had to restart to see changes. Now it seems I'm getting a lot of errors related to browser environment features:

 ERROR  TypeError: undefined is not an object (evaluating 'window.location.protocol')
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Not sure about last two, but window.location.protocol is most likely related to this

VityaSchel commented 1 year ago

I found this line of code in node_modules/telegram/client/telegramBaseClient.js:45

useWSS: platform_1.isBrowser ? window.location.protocol == "https:" : false,

It may be causing trouble, since window.location.protocol is nowhere else to be found in telegram module directory

VityaSchel commented 1 year ago

I replaced it with hardcoded "false", and now there is no more import errors. Not sure if it will connect, but I'll try and let you know!

VityaSchel commented 1 year ago

I tried calling "start" method but it throws same error:

ReferenceError: Can't find variable: crypto

I checked exports from 'telegram/platform.js' hoping they indicate that I incorrectly imported package and it thinks that it's node environment, but it says react-native is browser environment:

import * as platform from 'telegram/platform'
console.log(platform)
// outputs {"isBrowser": true, "isDeno": false, "isNode": false
VityaSchel commented 1 year ago

I found crypto module polyfill for expo, but I have no idea how to setup alias for it and make telegram package use it instead of "crypto" import :/ Should we add react-native environment directly to gramjs and use this polyfill on mobile devices?

VityaSchel commented 1 year ago

I tried polyfilling getRandomValues method, now telegram throws another error:

 LOG  [2023-03-15T16:03:10.711] [INFO] - [Connecting to vesta.web.telegram.org:80/TCPObfuscated using PromisedWebSocket]
 LOG  [2023-03-15T16:03:10.717] [WARN] - [Attempt 0 at connecting failed]
 ERROR  [TypeError: undefined is not a function (near '...window.addEventListener...')]

Honestly I feel this lib should be rewritten in order to be usable in react-native, a dozen of patches won't help

I tried removing listener for "offline" event and now getting very weird error, that I have no idea how to fix...

{"isTrusted": false, "message": "Expected HTTP 101 response but was '200 OK'"}
painor commented 1 year ago

hmm that's weird. I haven't tried it on react native before. can you setup a simple project on github using the library with minimal code so I can test it ?

VityaSchel commented 1 year ago

hmm that's weird. I haven't tried it on react native before. can you setup a simple project on github using the library with minimal code so I can test it ?

nah I gave up on this.. I was writing mobile app that sends photos from my gallery to my telegram contacts in case I don't exercise, but it turns out it's simplier to just straight ahead go do sport instead of hurting my brain trying to use react-native 😂

painor commented 1 year ago

haha that's fair. I never had a lot of requests to make the library mobile friendly so that's probably why it didn't work.

FaiezWaseem commented 1 year ago

Any Updates i have also tried to make it work , but stuck at same place as VityaSchel with this Error {"isTrusted": false, "message": "Expected HTTP 101 response but was '200 OK'"}

Barraki commented 1 month ago

Any updates of this issue ? Tried to install this lib react-native-crypto instead crypto with alias, but not success