[Bug]: `useActionData` returns raw `Response` when using polyfilled `fetch`

[hovsater]

What version of React Router are you using?

6.4.5

Steps to Reproduce

In a standard CRA environment, fetch is being polyfilled by fetch when running tests. Unfortunately, the polyfill does not implement .body, thus the new check introduced in #9690 fail and useActionData returns the raw Response instead.

Expected Behavior

I expect useActionData to always unwrap the Response body and give back the actual JSON.

Actual Behavior

Since the polyfill does not implement .body, typeof value.body !== "undefined" always fail and the response is not unwrapped as expected. Instead, the raw Response is returned by useActionData.

[brophdawg11]

Hm, I'm not sure we want to alter the router code to support a non-spec-compliant fetch polyfill just for testing purposes. Remix maintains it's own polyfill that aims to align as closely with the spec as possible, could you solve the issue by adding something like this to your jest setup files?

Or potentially just call installGlobals() from @remix-run/node

[hovsater]

@brophdawg11 I think switching to a different polyfill makes sense in the general case. However, we haven't explicitly opted in to using fetch. It's being injected automatically by CRA. Thus, I'm assuming this will break any application created using CRA that have not yet ejected.

Since there's no easy way of opting out (CRA only let's you control setupFilesAfterEnv through setupTests.js. See configuration for details) you would essential have to check if globalThis.fetch isn't defined or globalThis.fetch.polyfill is true and then overwrite whatever fetch did to boostrap itself.

[juha-younite]

Affects me as well. I tried to add those polyfills from @remix-run/web-fetch, but it did not work since original polyfill uses different URL implementation (or so I understood):

TypeError: Invalid URL: /some/endpoint
at new URLImpl (/some_project/node_modules/jest-environment-jsdom/node_modules/whatwg-url/dist/URL-impl.js:21:13)
at Object.exports.setup (/some_project/node_modules/jest-environment-jsdom/node_modules/whatwg-url/dist/URL.js:54:12)
at new URL (/some_project/node_modules/jest-environment-jsdom/node_modules/whatwg-url/dist/URL.js:107:22)
at new Request (/some_project/node_modules/@remix-run/web-fetch/src/request.js:78:16)
at /some_project/node_modules/@remix-run/web-fetch/src/fetch.js:42:19
at new Promise (<anonymous>)
at fetch (/some_project/node_modules/@remix-run/web-fetch/src/fetch.js:40:9)

[brophdawg11]

@hovsater Have you checked with the CRA folks to see if they're open to using a spec-compliant fetch polyfill? That feels like the proper avenue here to me, I don't know that we want to propagate non-spec-compliant support into react-router due to a choice made by CRA.

[hovsater]

I have not. I'll do that as well to start a discussion on their side. 🙂

[hovsater]

FYI: I've opened facebook/create-react-app#12913 over at facebook/create-react-app.

[brophdawg11]

Thanks @hovsater! I'll keep an eye over there as well!

[github-actions]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.