"undefined is not a function" from wonka.js on query operation in react-native #3129
Comments
|
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. |
|
Awesome thank this is an amazing lead. I'll hit up the expo discord. If there's any react-native specific urql documentation I might be able to provide I will get back to you |
|
@kitten thank you for your help, digging into the docs, expo 48 changed the default js engine from JS core to Hermes. Switching the engine back to jscore unblocks me, but it doesn't seem like this has ever worked on hermes. I have an issue open on expo to see if there's changes that can be made to their babel preset to support this. |
|
Is there a workaround for this that anyone knows of? Going back to JS core is a bad idea. Hermes has been the default for a while now. I'll look into it and post any options I come across. |
|
seems like this will work: aws-amplify/amplify-js#10764 (comment) |
|
So, is the official fix for this just to use the js core polyfill or should we be expecting an update from urql? |
|
@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: expo/expo#22006 (comment) However, I currently have no bandwidth to look into this and am not sure why this polyfill may not be applied correctly automatically |
Is just adding this to index.ts solved the issue for you? import "core-js/full/symbol/async-iterator";
import allSettled from "promise.allsettled";
allSettled.shim();
import "expo-router/entry"; |
|
@elisalimli I think that's what I did. I ended up not going with urql, but I'm pretty sure that worked |
|
@Vednus In my case adding the lines to index.ts fixed the "undefined is not a function" error. But while using useQuery network error occurs:
|
|
@elisalimli No, it was working, but I was trying to migrate from apollo-client and I needed some features urql didn't have. I was also migrating because urql is faster, but it wasn't so much faster that it made a huge difference. Not sure why you're getting this error, but it seems unrelated to the async iterator stuff. |
|
@Vednus can you share the link to the working code, please? I'm just trying to debug this error and can't solve it. |
|
@elisalimli I don't have any working code to show you. I have that work in a branch, but it's in a private repo and in a large project. I think the error you're getting probably means your useQuery code is wrong, like you didn't destructure correctly or something along those lines. |
|
Oh, It's ok. import React from "react";
import { Text, View } from "../../components/Themed";
import { gel, useQuery } from "urql";
const meQueryDocument = gql`
query {
hello
}
`;
export default function TabTwoScreen() {
const [result] = useQuery({ query: meQueryDocument });
console.log("result ", result);
return (
<View>
<Text>Tab Two</Text>
</View>
);
} |
|
@elisalimli you're importing "gel", but "gel" isn't a thing. I think you're meaning to import "gql" and that's why you're erroring out. |
|
@Vednus I don't know why that happened. But in my code it's |
|
@elisalimli then I don't know. Good luck |
|
@Vednus btw why are you not using react-query instead of Apollo? It looks like it has got a bunch of features |
|
@elisalimli I need data normalization |
|
For me, adding Edit: after adding |
|
You're welcome! In my case, today I re-tried adding the pollyfill stuff to index.ts.Although that fixes the 'undefined is not a function' error, but again the same network error occurs.
|
What version of expo? Was it with hermes or jsc? |
|
If anyone would like to try this In other words, I believe, with the patch in https://github.com/0no-co/wonka/releases/tag/v6.3.3 |
Confirming that this indeed fixes the issue! 🙏 |
|
just add wonka >=6.3.3 (yarn add wonka) => work |
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:
urql/packages/core/src/internal/fetchSource.ts
Line 198 in b7b14a4
The provided reproduction doesn't work in the snack web ui, but if you download the zip, run:
npm installnpx expo startand then use the Expo Go app to run it on an android phone and it runs fine. But then if you runnpm uninstall expoand thennpm 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
The text was updated successfully, but these errors were encountered: