[nuxt] [request error] [unhandled] [500] The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Promise

[rafaeldsousa]

Environment

node: v16.17
nuxt: 3.4.2
nitro: 2.3.3

Reproduction

Nuxt API requests using useAsyncData + $fetch in frontend and server api uses await readBody

Describe the bug

frontend request

const body = { params: { ...route.query } }

const { data, error } = await useAsyncData(
    'server-api',
    () => $fetch('/api/server-api', { method: 'post', body: body }),
    {
        initialCache: false
    }
).catch((e) => console.error(e))

server API composable

export default defineEventHandler(async (event) => {

    const body = await readBody(event)
}

Additional context

Same issue as described here 19d133d by many others.
This latest release 1.4.0 seems to break things.

There is a workaround but it doesn't feel like something we'd actually want to be doing all over projects.
19d133d#r109674536

Logs

[nuxt] [request error] [unhandled] [500] The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Promise

[danielroe]

Would you be able to provide a reproduction? 🙏

[rafaeldsousa]

@danielroe this would be sort of a clone in terms of npm packages and env setup I have, but I cannot reproduce the issue on codesandbox. (note I have some resolutions on package.json to force some version to what I have locally)
https://codesandbox.io/p/sandbox/hellow-rkt3in

Locally and on the azure server we use I can definitely still reproduce the issue when I upgrade to 1.6.4. (Video below)

Screen.Recording.2023-05-03.at.9.49.39.AM.mp4

[so1ve]

Found it first introduced in 19d133d

[igorjacauna]

I used this workaround, in commit that @so1ve mentioned, to make work my api routes. But, api routes created by libs like nuxt-vuefire for example, that has not the workaround implemented, throw the error.

PS: Error only shows up in production. I use Firebase to deploy.

[so1ve]

It suddenly worked in nuxt 3.5.1, and the workaround seemed to be buggy :(

[danielroe]

@so1ve so is the issue resolved now?

[so1ve]

@so1ve so is the issue resolved now?

I'm not sure. In my use case (nuxt) the issue is resolved, but h3 users may not.

[igorjacauna]

Hi @danielroe ,

I just run npx nuxi@latest upgrade --force and the Nuxt is in 3.5.2.

I got error about this issue that block my build. So, I removed yarn.lock and reinstall. And this time the build works.

Locally, the requests works fine. But in Firebase, where I deployed my application, shows:

The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Object

The workaround still works:

// @ts-expect-error - req.body is not defined in the type definitions
const body = await (event.node.req.body || readBody(event));

[igorjacauna]

@danielroe , just created this Nuxt project with npx nuxi@latest init app: https://github.com/igorjacauna/issue-readbody

After deploy to Firebase, should show error when try to make a POST request to /api/issue with a body in request

In Function logs shows:

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Object
    at new NodeError (node:internal/errors:387:5)
    at Function.from (node:buffer:328:9)
    at file:///workspace/node_modules/h3/dist/index.mjs:288:70
    at async readBody (file:///workspace/node_modules/h3/dist/index.mjs:314:16)
    at async file:///workspace/chunks/issue.post.mjs:6:18 {
  code: 'ERR_INVALID_ARG_TYPE'
}

[sisou]

Thanks @igorjacauna for the repro!

It even works (or rather breaks) without deploying to Firebase. Change API_ID in .firebaserc to something lowercase (like appid) and just add firebase-tools as a dependency, and you can run and reproduce it in the emulator:

yarn add --dev firebase-tools
NITRO_PRESET=firebase yarn build
yarn firebase emulators:start --only functions,hosting

# From another terminal:
curl -X POST 'http://localhost:5000/api/issue' -H 'Content-Type: application/json' --data-raw '{"test":1}'

[pi0]

Another related fix where firebase parses form-data requests as object into req.body: #604