optimizely
[BUG] Error in React Native project after the update to 3.0.0
Is there an existing issue for this?
- [X] I have searched the existing issues
SDK Version
3.0.0
Current Behavior
Error:
WARN [OPTIMIZELY] - ERROR 2024-01-25T09:42:46.596Z BUCKETER: Unable to generate hash for bucketing ID 10...80: Property 'TextEncoder' doesn't exist
Expected Behavior
No errors.
Steps To Reproduce
Version 3.0.0 updated @optimizely/optimizely-sdk from 4.9.1 to 5.0.0 (https://github.com/optimizely/react-sdk/compare/2.9.2...3.0.0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L33), that updated murmurhash to 2.0.1 and that replaced Buffer with TextEncoder (https://github.com/perezd/node-murmurhash/releases/tag/2.0.1). The problem is that TextEncoder doesn't seem to be defined in ReactNative environment (maybe just when using hermes engine?) so it throws errors like this:
WARN [OPTIMIZELY] - ERROR 2024-01-25T09:42:46.596Z BUCKETER: Unable to generate hash for bucketing ID 10...80: Property 'TextEncoder' doesn't exist
I found this in another repo - https://github.com/paralleldrive/cuid2/pull/41 - which seems to be addressed here by adding instructions to the README - https://github.com/paralleldrive/cuid2/commit/21da5b46aff4e1479920f1943ea129444abfe2a8. Should this library also have that documented maybe? I tried adding those polyfills and both of them fix the issue.
React Framework
No response
Browsers impacted
No response
Link
No response
Logs
No response
Severity
No response
Workaround/Solution
Use either fast-text-encoding or text-encoding-polyfill TextEncoder polyfill as mentioned in https://github.com/paralleldrive/cuid2/commit/21da5b46aff4e1479920f1943ea129444abfe2a8
Recent Change
No response
Conflicts
No response
We're still seeing this as a problem in React Native projects... More research needed...
Also reported by https://github.com/optimizely/javascript-sdk/issues/925
@mlazari you are right. TextEncoder was not available in Hermes until recently. So React Native >= 0.74 now supports TextEncoder. Upgrading to >=0.74 will resolve the issue.
If the upgrade is not possible, then you have to use polyfill to support the encoding functionalities. Here is one you can try.
@junaed-optimizely Thank you, good to know 0.74 supports it. For now I ended up using fast-text-encoding. text-encoding-polyfill also was working when I tried it, as I mentioned in the description.
Closing this, as we have added better support for React Native in v3.1.2 onward. And here is the detailed doc for integration. React Native installation guide