🐛 BUG: FormData object causes fetch error

[bholmesdev]

What version of astro are you using?

0.23.7

What package manager are you using?

npm, pnpm

What operating system are you using?

Mac

Describe the Bug

1. Create a new FormData object in any .astro template
2. Make a POST request with FormData as the request body

Example:

const formData = new FormData()
formData.set('title', title)

// URL is irrelevant. Error occurs at the parsing step!
await fetch('https://example.com', {
	method: 'POST',
	body: formData,
	headers: {
		'Content-Type': 'application/json',
	}
})

3. Visit route in your browser. You should see this error:

500: Internal Error
The "iterable" argument must be an instance of Iterable. Received an instance of ReadableStream
TypeError [ERR_INVALID_ARG_TYPE]: The "iterable" argument must be an instance of Iterable. Received an instance of ReadableStream
    at new NodeError (internal/errors.js:322:7)
    at from (internal/streams/from.js:32:11)
    at Function.Readable.from (internal/streams/readable.js:1368:10)
    at new Body (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/@astropub+webapi@0.10.14/node_modules/@astropub/webapi/mod.js:6055:29)
    at new Request (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/@astropub+webapi@0.10.14/node_modules/@astropub/webapi/mod.js:7213:3)
    at file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/@astropub+webapi@0.10.14/node_modules/@astropub/webapi/mod.js:7477:19
    at new Promise (<anonymous>)
    at fetch$1 (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/@astropub+webapi@0.10.14/node_modules/@astropub/webapi/mod.js:7475:9)
    at fetch (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/@astropub+webapi@0.10.14/node_modules/@astropub/webapi/mod.js:7873:20)
    at eval (/Users/benholmes/Sandbox/form-plz/src/pages/index.astro:23:9)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ypljcj-82rtfc?file=src/pages/index.astro

[FredKSchott]

We should update from node-fetch to https://www.npmjs.com/package/undici, which is becoming the official fetch() client in future versions of Node.js. That might fix this automatically.

[bholmesdev]

@FredKSchott Interesting! Will say I'm hitting some snags in a local setup though:

1. I need to import undici's FormData implementation for this to work. It differs from the browser-based FormData just enough that it'll through a type error in my editor.
2. Vite is not happy with their fetch function for whatever reason. When attempting to try like so:

---
// even re-cast to `undiciFetch` to see if our compiler was getting clever
import {fetch as undiciFetch, FormData} from 'undici'

const title = "Demo"

const formData = new FormData()
formData.set('title', title)

await undiciFetch('https://example.com', {
	method: 'POST',
	body: formData,
	headers: {
		'Content-Type': 'application/json',
	}
})
---

I see the server error:

05:36:55 PM [error] TypeError: __vite_ssr_import_1__.fetch is not a function
    at eval (/Users/benholmes/Sandbox/form-plz/src/pages/index.astro:19:31)
    at renderToString (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/astro@0.24.3/node_modules/astro/dist/runtime/server/index.js:334:27)
    at render (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/astro@0.24.3/node_modules/astro/dist/core/render/core.js:85:20)
    at async render (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/astro@0.24.3/node_modules/astro/dist/core/render/dev/index.js:50:17)
    at async ssr (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/astro@0.24.3/node_modules/astro/dist/core/render/dev/index.js:118:12)
    at async handleRequest (file:///Users/benholmes/Sandbox/form-plz/node_modules/.pnpm/astro@0.24.3/node_modules/astro/dist/vite-plugin-astro-server/index.js:115:18)

[FredKSchott]

Oh, I meant to say to update it in the webapi polyfill library, so that you don't need to import it yourself. I think Vite would ignore it then in SSR & on the browser, since it would just be a global polyfill.

See: https://github.com/withastro/astro/blob/63adaeec3420e68236613848293881721231d58b/packages/webapi/src/lib/fetch.ts