#1voy
hearty talon
weak plank
Hello! I'm happy to help you here. What's your question?
alpine magnet
I managed to console.log(request.headers) as one of the staff asked in that thread. Here is the response:
weak plank
What's your question about this? Is there a problem you're trying to solve?
alpine magnet
I am getting an "Invalid body" error when following the next.js Stripe tutorial. This is the code that I am using:
weak plank
Can you share the exact error?
alpine magnet
at createError (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:33:17)
at eval (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:129:47)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async POST (webpack-internal:///(sc_server)/./src/app/api/stripe-webhook/route.js:25:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37) {
statusCode: 400,
originalError: TypeError: stream.on is not a function
at readStream (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:143:12)
at executor (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:80:9)
at new Promise (<anonymous>)
at getRawBody (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:79:12)
at eval (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:118:39)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async POST (webpack-internal:///(sc_server)/./src/app/api/stripe-webhook/route.js:25:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37)
}
That's coming from line 25 of the code in your screenshot?
alpine magnet
Does that mean the objects I am passing to the stripe function are in bad format?
weak plank
Yes. The first argument you pass to constructEvent() should be the raw body of the incoming request. If you log out reqBuffer what do you see?
There's some information in the Next.js docs about getting the raw body here: https://nextjs.org/docs/pages/building-your-application/routing/api-routes#request-helpers
One use case for disabling the automatic bodyParsing is to allow you to verify the raw body of a webhook request, for example from GitHub.
alpine magnet
console.log does not return anything. This error is also very unhelpful - I commented out the stripe function and it points at line 29, that is empty:
at createError (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:33:17)
at eval (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:129:47)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async POST (webpack-internal:///(sc_server)/./src/app/api/stripe-webhook/route.js:27:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37) {
statusCode: 400,
originalError: TypeError: stream.on is not a function
at readStream (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:143:12)
at executor (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:80:9)
at new Promise (<anonymous>)
at getRawBody (webpack-internal:///(sc_server)/./node_modules/raw-body/index.js:79:12)
at eval (webpack-internal:///(sc_server)/./node_modules/micro/dist/src/lib/index.js:118:39)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async POST (webpack-internal:///(sc_server)/./src/app/api/stripe-webhook/route.js:27:23)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37)
}```
weak plank
Is the file shown in the screenshot /src/app/api/stripe-webhook/route.js or a different file?
alpine magnet
Yes, this is the file
weak plank
In that case it's pointing to line 27: at async POST (webpack-internal:///(sc_server)/./src/app/api/stripe-webhook/route.js:27:23)
But that's a console.log() line in your screenshot. Are you sure the code in the screenshot is what produced this error? It hasn't been modified?
alpine magnet
Yes, that is the code. Above are just imports
it seems the the buffer function is throwing that error. if I comment it out, nothing happens
const reqBuffer = await buffer(request)
weak plank
Yeah, I doubt that's giving you what you want.
Maybe try this approach? https://vancelucas.com/blog/how-to-access-raw-body-data-with-next-js/
alpine magnet
I will try that, thank you. But then, I can't seem to access the headers. constructEvent needs the signature, and request.headers['stripe-signature'] console.log's undefined
I also cannot do export const config = { api { bodyParser: false } } as it is deprecated in the App directory, and only used in Pages.
weak plank
I'm not very familiar with Next.js, so I'm not sure how much more help I can provide. The goal is to get the raw, unaltered body of the request and the Stripe-Signature header to the constructEvent() function. The Next.js docs I linked to above indicate using raw-body with bodyParser turned off is the way to do that.
alpine magnet
i think i stumbled upon a solution, please dont close so I can share after I test it
weak plank
Okay.
alpine magnet
For anybody struggling with Next 13 Route Handler Stripe Webhooks: https://github.com/shadcn/taxonomy/blob/main/app/api/webhooks/stripe/route.ts