[React Native] Fix BlobManager import #595
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Users have recently reported errors of the form
when CRUD uploads were completed.
The
BlobManager
is used by thereact-native-fetch-api
package to parse HTTP request responses. The error here seems to be caused by the SDK making a call to the PowerSync service'swrite-checkpoint2.json
endpoint after completing CRUD uploads.Users confirmed that using the Expo implementation for
fetch
resolves the issue. See this POC #591.Expo's
fetch
implementation is great, but it is included directly in theexpo
NPM package. Bare React Native users unfortunately do not have the option of using this fix. Conditionalrequire
/import
statements are also not handled very well in Metro currently. Attempting to conditionally requireexpo/fetch
can print an error message to the console for non Expo users.The true root cause of this issue seems to be due to the React Native package gradually shifting to ESM exports. The BlobManager was recently converted to an ESM export https://github.com/facebook/react-native/pull/48761/files. Our Rollup config targets a CommonJS output which converts the
import
in react-native-fetch-api to arequire
statement. In some project environments, the require can resolve to an object of the form:While we expect
BlobManager
to directly be returned. Our code then tries to accesscreateFromOptions
on the result, but this is undefined due to the ES module wrapper structure.The fix here is to vendor a small wrapper for
BlobManager
which checks the result of requiring theBlobManager
.Testing
This was tested in a bare React Native App and in the Expo Supabase demo.