"JSON Parse error" in React Native in MSW 2 #1775
Comments
sairus2k
added
bug
|
After more debugging, it seems the core problem is that I tried using the |
|
Hitting this issue too. Any progress? |
|
Not much. Just made a reproduction without React Native. https://github.com/sairus2k/msw-xhr |
|
Ok. @kettanaito any thoughts here? Happy to contribute to a fix but unclear where to start |
When discussing reproduction in a non-React Native environment, the issue seems to lie within the |
|
Can someone clarify why MSW cannot control how third-party fetch polyfills function, and whether they implement the Fetch API specification faithfully. That's their responsibility. The last time I looked, none of the existing fetch polyfills were faithful to the spec. All sorts of issues may arise because of that. What we should try next is using @sairus2k, thanks for putting up that example but it has a few issues in itself:
|
|
To clarify the context, we are discussing the approach to mock data requests in iOS simulators and Android emulators. Mocking on real devices might be more complicated than that. And mocking in Jest tests for React Native works just fine.
The React Native framework does not operate as a Node.js process, as noted in the documentation: These environments come equipped with global XMLHttpRequest and Fetch implementations. The Fetch implementation is accessible at this location on GitHub: The XMLHttpRequest implementation can be found here:
So, we don't use whatwg-fetch explicitly. React Native uses it implicitly under the hood to align their XMLHttpRequest implementation with the modern Fetch standard.
Indeed, undici is tailored for Node.js, distinct from a React Native process. An attempt to use it resulted predictably in errors due to the absence of certain Node.js modules. It is doubtful how it could be beneficial in this scenario.
Identifying the root cause of the issue might necessitate opening an issue in the React Native repository for resolution. Alternatively, a workaround like patch-package could be employed. It's unlikely that MSW itself is the problem. Thank you for reviewing the repro repository!
I moved it to vitest.setup.ts, but it does not seem that makes some difference.
This repository's intent is to emulate the issue as it occurs in React Native, which does utilize whatwg-fetch internally. Thus, it was used here. Unfortunately, undici is incompatible with React Native.
I have removed location mock. Previously, there was an error, stating "Cannot read locaiton of undefined". Now the issue is resolved. |
sairus2k
changed the title
|
There isn't much MSW can do until facebook/react-native#27741 is resolved on the React Native side. That would be the proper fix and wouldn't want to do any workarounds to compensate for the lack of specification compliance. Meanwhile, folks are reporting a different fetch polyfill that can fix the issue. Can somebody please give it a try? Let me know if it works, we could add it to the React Native integration docs. |
|
I tried to use the fetch polyfill that you provided here but unfortunately It don't seem to make a lot of difference.. Is it also a problem with MSW v1.x ? |
It works as expected, expect that fact that is not intercepted by MSW. This occurs because the polyfill does not utilize XMLHttpRequest; instead, it employs the native Networking library. |
Oh, I see. This is rather unfortunate. But it also implies that the issue is in the polyfill itself maybe?
Afaik, no, it's not. MSW 1.x doesn't depend on the fetch API primitives as much as 2.0 does, where they become first-class citizens of handling requests/responses in your request handlers. I will give this issue a bit more time if someone finds out something else about it but so far it looks like it's a candidate for being closed. There's nothing we can/should do on MSW's side to resolve this. It comes down to how requests are polyfilled in React Native. |
|
Hello! I have the same issue with the native react-native fetch, tried using many polyfills but none of them managed to have the requests intercepted. Decided to use undici but could not get it to work as it depends on node module we don't have. |
The issue here is that msw/native intercepts only XMLHttpRequest. To fix this, you could modify msw/native to include a Fetch interceptor to try those polyfills. However, I've also encountered the same error while using polyfills.
I agree, it seems like downgrading to version 1 is the only option for using MSW with React Native at the moment. But, I also had trouble getting it to work properly, even after downgrading. |
|
Got it working using v1, needed the url polyfill. Only issue is not getting the request headers in my handlers but worked around it by temporarily saving them up when receiving the request:start which somehow does contain said headers 🤷♂️. |
|
Got it working using patches from this comment #1926 (comment) Added those patches to reproduction repo, so now it works. |
|
Thank you so much, @sairus2k. The changes to the Interceptors are already merged, will release a new patch version for MSW with this fix once the package is published. Exciting! |
Released: v2.1.7 🎉This has been released in v2.1.7! Make sure to always update to the latest version ( Predictable release automation by @ossjs/release. |
|
the current version only works for network calls with the fetch API. Axios, a super popular library, uses XMLHttpRequest and the mocked responses return empty response bodies @kettanaito |
Prerequisites
Environment check
mswversionNode.js version
v18.17.1
Reproduction repository
https://github.com/sairus2k/msw-reproduction
Reproduction steps
yarnyarn startyarn iosoryarn androidmswCurrent behavior
The error is thrown:
Debug
Expected behavior
Network requests mocked by msw should return the mocked response without errors.
The text was updated successfully, but these errors were encountered: