Singlefetch Error: Unable to decode turbo-stream response from URL: <URL>

[jorisre]

Reproduction

With Singlefetch enabled

1. Visit the deployed version at this link: https://remix-run-singlefetch-remix-auth-ca1ql29ci.vercel.app/
2. Attempt to log in using a fake email and password (as there's no verification process in place
3. The app then crashes.

Repo (created from Stackblitz) : https://github.com/jorisre/remix-run-singlefetch-remix-auth

Note : everything is working well in local env.

System Info

Not revelant

Used Package Manager

npm

Expected Behavior

Should not throw an error.

Actual Behavior

When I attempt to submit the login, I encounter the following error :

Error: Unable to decode turbo-stream response from URL: https://remix-run-singlefetch-remix-auth.vercel.app/login.data
at Xa (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:148:1739)
at async https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:148:275
at async f (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:185:1603)
at async https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:148:209
at async Oy (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:50:5397)
at async https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:148:163
at async Promise.all (index 1)
at async Dy (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:50:4048)
at async Pr (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:49:28962)
at async ip (https://remix-run-singlefetch-remix-auth.vercel.app/assets/components-oExZcOUt.js:49:21275)

Note that I'm using remix-auth and remix-auth-form packages from @sergiodxa

[brophdawg11]

It looks like your action is returning an error - a 500 HTTP response with no body - which is presumably why it can't be decoded:

curl -i -X POST 'https://remix-run-singlefetch-remix-auth-ca1ql29ci.vercel.app/login.data' \
  -H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
  --data-raw 'email=test%40test.com&password=password'

I would try to isolate what's happening in your action and see what value is being returned or if it's throwing something? If it's still an issue pointing to the single fetch decoding, could you create a smaller reproduction without the use of the authenticator and just return the data that causes the failure?

[jorisre]

I've deployed a branch with single fetch disabled, and it's working as expected.

You can test it out here: https://remix-run-singlefetch-remix-git-857368-joris-projects-c610dd57.vercel.app/
The corresponding PR is available here: jorisre/remix-run-singlefetch-remix-auth#1

[jorisre]

@brophdawg11

I've created a new instance with a simple redirect in the action, which causes the app to crash with the same error. It appears that when singleFetch is enabled, including a redirect in an action results in a failure.

https://remix-run-singlefetch-remix-git-1283f8-joris-projects-c610dd57.vercel.app/login
jorisre/remix-run-singlefetch-remix-auth#2

[OnlyLogiicC]

Hi, It could have something to do with the use of nativeFetch on Vercel's part which is currently not working correctly.
Since the server is returning a 500 response with no body, it causes your turbo-stream error.
From what i am experiencing, singleFetch is working fine for loaders on Vercel but not Actions. So i have unabled singleFetch only on Loaders for now.
Best Regards

Edit : I think you will find the solution here as I did : vercel#124

[jorisre]

Hi, It could have something to do with the use of nativeFetch on Vercel's part which is currently not working correctly. Since the server is returning a 500 response with no body, it causes your turbo-stream error. From what i am experiencing, singleFetch is working fine for loaders on Vercel but not Actions. So i have unabled singleFetch only on Loaders for now. Best Regards

Edit : I think you will find the solution here as I did : vercel#124

Thank you! I attempted the suggested solution, but unfortunately, it didn't resolve my problem.

[OnlyLogiicC]

When using singleFetch in an action with the unstable_defineAction, you cannot use redirect. You need to use the ResponseStub to set the status and header for redirection as shown in this paragraph : https://remix.run/docs/en/main/guides/single-fetch#headers
You can do as follow :

response.status = 302;
response.headers.set("Location", "/location");
return null;

If the problem persist and comes from another reason, i recommend using the Runtime Logs from the Vercel dashboard to investigate what happens when you make the request.
Best regards

[brophdawg11]

This looks to be an issue on the Vercel side - it could be something to do with their fetch polyfilling.

When using singleFetch in an action with the unstable_defineAction, you cannot use redirect

This is incorrect - you can definitely return a redirect from an action using Single Fetch - further down in that section of the docs it states:

For v2, you may still continue returning normal Response instances and they'll apply status codes in the same way as the response stub, and will apply all headers via headers.set - overwriting any same-named header values from parents. If you need to append a header, you will need to switch from returning a Response instance to using the new response parameter.

To ensure you can adopt these features incrementally, our goal is that you can enable Single Fetch without changing all of your loader/action functions to leverage the response stub. Then over time, you can incrementally convert individual routes to leverage the new response stub.

Here's a quick example of redirecting from an action with Single Fetch enabled: https://stackblitz.com/edit/remix-run-remix-vtbxq2

I'm going to close this out since I don't think this is an issue on the Remix side - but if you can provide a reproduction of the issue outside of a Vercel deployment then we can definitely reopen and dig in further.