Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react-native): error Cannot create URL for blob #1840

Merged
merged 3 commits into from
Apr 10, 2024

Conversation

MaximoLiberata
Copy link
Contributor

Error: Cannot create URL for blob!

located: src/lib/client.ts
method: _setupPingTimer
class: PingTimer
init: getTimer(variant) = getTimer('auto')

Description:

The error is caused for the library worker-timers when the class PingTimer call getTimer('auto') method. This method getTimer doesn't recognize it's executed in ReactNative (RN), it know it's executed in a browser, but RN implements its own timers as: setTimeOut, setInterval, etc., when is called the method workerTimer instead nativeTimer the library worker-timers that implement Blob to store data or whatever it does, throw the next error: [Error: cannot create URL for blob!], Blob it isn't supported by RN.

Fix:

To support ReactNative (RN) it's necessary install 2 package additionals to RN projects:

Also include the next code at beginning of the program:

process.nextTick = (callback) => { setTimeout(callback, 0) }

Conclusion

I have the commit of the fix of this bug, please @robertsLando allow me create a PR and show you my solution.

I will attach my mqtt client connection and the files I changed in this package to fix the bug:

mqtt_client_example.txt
is-browser.txt
get-timer.txt
shared.txt
BufferedDuplex.txt

src/lib/get-timer.ts Outdated Show resolved Hide resolved
@robertsLando robertsLando changed the title fix: Error Cannot create URL for blob in React Native fix(react-native): error Cannot create URL for blob Apr 10, 2024
robertsLando
robertsLando previously approved these changes Apr 10, 2024
@robertsLando
Copy link
Member

@MaximoLiberata Please fix lint issues: npm run lint-fix

@MaximoLiberata
Copy link
Contributor Author

@MaximoLiberata Please fix lint issues: npm run lint-fix

Thank, I made the change at last commit 2fa569b

@robertsLando robertsLando enabled auto-merge (squash) April 10, 2024 14:38
@robertsLando robertsLando merged commit fc8fafb into mqttjs:main Apr 10, 2024
4 checks passed
@abdelhameedhamdy
Copy link
Contributor

Hey @MaximoLiberata
thanks for issue resolving, wonder should
process.nextTick = (callback) => { setTimeout(callback, 0) }

still to be added at start of the program, after the recent release 5.5.2,
As without adding this line, I got process.nextTick is not a function error in RN app.

Thanks

@MaximoLiberata
Copy link
Contributor Author

Hey @MaximoLiberata thanks for issue resolving, wonder should process.nextTick = (callback) => { setTimeout(callback, 0) }

still to be added at start of the program, after the recent release 5.5.2, As without adding this line, I got process.nextTick is not a function error in RN app.

Thanks

Hey @abdelhameedhamdy,

Yes, it's still necessary add that line at start of the program, the library doesn't affect the global environment of the React Native APP, also I couldn't find what library/package is using process.nextTick . I gonna upload a example of my RN implementation where you and other can see it and test it.

@abdelhameedhamdy
Copy link
Contributor

Hey @MaximoLiberata thanks for issue resolving, wonder should process.nextTick = (callback) => { setTimeout(callback, 0) }
still to be added at start of the program, after the recent release 5.5.2, As without adding this line, I got process.nextTick is not a function error in RN app.
Thanks

Hey @abdelhameedhamdy,

Yes, it's still necessary add that line at start of the program, the library doesn't affect the global environment of the React Native APP, also I couldn't find what library/package is using process.nextTick . I gonna upload a example of my RN implementation where you and other can see it and test it.

I think the package is process-nextick-args

@MaximoLiberata
Copy link
Contributor Author

MaximoLiberata commented Apr 12, 2024

Hey @MaximoLiberata thanks for issue resolving, wonder should process.nextTick = (callback) => { setTimeout(callback, 0) }
still to be added at start of the program, after the recent release 5.5.2, As without adding this line, I got process.nextTick is not a function error in RN app.
Thanks

Hey @abdelhameedhamdy,
Yes, it's still necessary add that line at start of the program, the library doesn't affect the global environment of the React Native APP, also I couldn't find what library/package is using process.nextTick . I gonna upload a example of my RN implementation where you and other can see it and test it.

I think the package is process-nextick-args

I will see it and I will return you a feedback, while please check the implementation that I did in React Native (React Native MQTT.js Implementation), test it and tell me if worked for you, also to continue the discussion we can go to #1841

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants