Why is the polyfill fetch library being used always?

[bobziroll]

There's a conflict with React Router ≥ v6.4.5, where it always expects a response to have a body property. However, the whatwg-fetch library used by pretender is intercepting the Response created by React Router and appending a _bodyInit property instead of a body property. So React Router checks this Response with a duck-typing check, sees that it doesn't have a body property (which the W3 spec requires of a Response obj), and rejects it as not being a valid Response.

(In v6.4.4 they were checking it with instanceof Request which was passing that check.)

My question is, why is this polyfilled fetch being used instead of the native fetch when my browser has a native fetch? The native fetch doesn't have this problem.

[mdbiscan]

Is this happening for you in Node?

[bobziroll]

I haven't tried it in Node. I realize now I wasn't very descriptive of my scenario.

I'm building a React project w/ React Router and using Mirage JS as a fake API. Mirage JS is using Pretender, which is using whatwg-fetch as the polyfill for fetch. Because that polyfill doesn't include a body property, React Router isn't recognizing the Response as a legitimate response, since Response objects need to have a true .body property according to the spec.

There are some limitations to the polyfill and streaming responses, which is why they chose not to include a true .body on their Responses. However, from poking around the Pretender code base, it looks like that polyfill is being used whether the browser environment it's being used in is modern enough to have a fetch implementation built in.

I wrote this little PR that would check to see if the browser being used has window.fetch already.

I also might be way in over my head with this 😅 but I thought I'd give it a shot in the dark to see if that might help avoid using the polyfill if it isn't needed in that environment. But I'm very happy to be corrected if I'm not going about things the right way.

[vincicat]

I also have similar issue with the fetch polyfill of pretender in node.js (v20.0) - global.Headers is now a read only property as fetch is officially supported for a while (see link), the mocking always throw a Type Error now.

Please accept the PR #362

[na-ji]

I'm building a React project w/ React Router and using Mirage JS as a fake API. Mirage JS is using Pretender, which is using whatwg-fetch as the polyfill for fetch. Because that polyfill doesn't include a body property, React Router isn't recognizing the Response as a legitimate response, since Response objects need to have a true .body property according to the spec.

The exact same issue is happening on Next.js with its app router. Next's app router uses the .body property to enable the smooth navigation from page to page. Because of this issue, the navigation is completely broken on NextJS when using Miragejs/pretender. It would be cool if the PR #362 was accepted to fix this issue.