onRequest Hook in asyncData causes nuxt generate to hang forever
Didn't see an issue template, but will happily update this if there is one.
I'm using $http in a nuxt static site. I wanted to add the onRequest hook so we could log requests during our generate to a monitoring/observability service. What I found was that the hook seems to cause some requests to never resolve back to the template. This also happens with nuxt dev too.
I tried returning & not returning the response like this:
$http.onResponse((request, options, response) => {
console.log(response)
return response
})
or
$http.onResponse((request, options, response) => {
console.log(response)
})
I see the console.log from the response, but the page making the request never resolves.
If I comment out the whole $http.onResponse block, the site builds just fine. I'm able to use the $http.onRequest hook without this issue, it's just the onResponse hook that seems to cause problems.
Reproduction Steps
- Create a Nuxt site for static hosting
- Add @nuxt/http & add an $http request to asyncData
- Create a plugin via the instructions here: https://http.nuxtjs.org/hooks#onresponse
- Register that plugin in the nuxt-config
- Run
nuxt generate
Demo/Reproduction Repo
I made a demo repo using the pokemon api for the request here: https://github.com/mdarrik/http-middleware-test/
It's a plain nuxt-cli created repo with @nuxt/http, a server plugin that features the above code, and a request inside the
asyncData function of the index.vue page.
System Info
OS: Ubuntu via WSL2 (also confirmed on MacOS) Node: 14.14.0
Other Info
If I switch the request in the demo from $http.$get to $http.get (no dollar sign) without changing any other code the promise seems to resolve. (it'll throw errors with properties accessed from the body being undefined), but if I update the request code like so:
$http.get(url).then(response => response.json())
the json conversion never seems to resolve. So it seems likely there's a bug in resolving the response body's stream if the onResponse hook is used?
It seems to be an issue with the clone() function used by node-fetch: https://github.com/sindresorhus/ky-universal#clone-hangs-with-a-large-response-in-node---what-should-i-do https://github.com/node-fetch/node-fetch/issues/665
@nuxtjs/http should use node-fetch v3
I lost a lot of time with this issue...