urql: "undefined is not a function" from wonka.js on query operation in react-native
Describe the bug
Using a minimal example mostly copied from the docs I’m getting the error “undefined is not a function” when a useQuery attempts to execute the operation. This is specifically happening on Android using expo@48 (react-native dev environment). There is some incompatibility with urql@4 and expo@48 that I haven’t been able to get to the bottom of.
Debugger is pointing to this line as the entry to wonka.js: https://github.com/urql-graphql/urql/blob/b7b14a40e68e74f0f8ea90ee407514e9336c2c09/packages/core/src/internal/fetchSource.ts#L198
The provided reproduction doesn’t work in the snack web ui, but if you download the zip, run:
npm install npx expo start and then use the Expo Go app to run it on an android phone and it runs fine. But then if you run npm uninstall expo and then npm install expo@48 (newest version), urql does not function properly. I’ll continue to work on tracking down what package exactly is causing the incompatibility. upgrading expo also upgrades react-native and several other packages.
btw love this project, I have multiple web apps using urql and they have always worked flawlessly.
Reproduction
https://snack.expo.dev/@jtc3161/curious-chip?platform=web
Urql version
urql v4.0.0
Validations
- I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
- Read the docs.
- Follow our Code of Conduct
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 25 (3 by maintainers)
seems like this will work: https://github.com/aws-amplify/amplify-js/issues/10764#issuecomment-1363140556
If anyone would like to try this
wonka@6.3.3contains a workaround that should allow React Native + Hermes’s default Babel transpilations to still work withfromAsyncIterable&toAsyncIterable.In other words, I believe, with the patch in
wonka, this should now work without having to include thesymbol/async-iteratorpolyfill fromcore-jsmanually.https://github.com/0no-co/wonka/releases/tag/v6.3.3
For me, adding
import 'core-js/full/symbol/async-iterator';at the top of myindex.jsworked. Thanks @elisalimli ! I didn’t need to add Promise.allSettled, appears to be already available. I’m in a normal RN project, not expo.Edit: after adding
graphcachewith@urql/storage-rnI ended up doing:@elisalimli I need data normalization
What version of expo? Was it with hermes or jsc? I can’t get it working with pollyfills using expo 48 hemes
@elisalimli then I don’t know. Good luck
@Mafooch We’re not currently planning a change from our end, no, as the switch to async generators on our fetch implementation was intentional given our browser support. That said, while Hermes is not supporting async generators/iterables — and you can work around this by ensuring the proper polyfills and transforms are applied — the React Native Babel preset should, as long as it’s applied to node modules, polyfill support for this.
However, for one reason or another this doesn’t seem to be the case. The only issue that was opened in reaction to this is: https://github.com/expo/expo/issues/22006#issuecomment-1502101078
However, I currently have no bandwidth to look into this and am not sure why this polyfill may not be applied correctly automatically
I’m not sure what Expo’s default transpilation for node modules comes down to, since I’ve actually seen that their preset includes this, but to summarise, the problem here is that you’ll need to add a transformer for async generators, so it’s not a bug per se, but React Native is basically the only supported platform that doesn’t have support for async iterables/generators out of the box and will need that to be transpiled.
This on its own isn’t that unusual — after all — Hermes has a bunch of unsupported ES features that are a little odd compared to other platforms, but generally speaking, I’m basically just not sure what Expo’s default’s on this are or what Expo Snack’s defaults for this are.