Next.js Discord

Discord Forum

Integrate Stripe TypeScript 'donate-with-elements' into Next.js 13 app router project

Unanswered
Japanese cockle posted this in #help-forum
Open in Discord
Original message was deleted.

13 Replies

Avatar
Japanese cockle
Here is the error message I receive when attempting to deploy to Vercel:

Failed to compile.
./app/actions/stripe.ts
ReactServerComponentsError:
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
,-[/vercel/path0/app/actions/stripe.ts:3:1]
3 | import type { Stripe } from 'stripe'
4 |
5 | import { redirect } from 'next/navigation'
6 | import { headers } from 'next/headers'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | import { CURRENCY } from '@/config'
9 | import { formatAmountForStripe } from '@/utils/stripe-helpers'
`----
One of these is marked as a client entry with "use client":
./app/actions/stripe.ts
./app/components/ElementsForm.tsx
Build failed because of webpack errors
Error: Command "npm run build" exited with 1

I am using the ‘/actions/stripe.ts’ document from https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts
Just put that into your own app's next.config.js
And restart the server
Avatar
Japanese cockle
Thank you for your help! I already have 'use server' at the top and my server actions are enabled. I am using this exact code from https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript and the /actions/stripe.ts from here https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts
Avatar
Then that means ./app/components/ElementsForm.tsx is a client component
You cant do that
Avatar
Japanese cockle
Hmm, it is a client component, but it works great when I test it alone, with 'use server' in the /actions/stripe.ts and 'use client' in my ElementsForm.tsx. Why does it work alone , but not in my project? What am I missing?
Avatar
You cant import Server Component into Client Component.
Avatar
Japanese cockle
I guess I will never use stripe then. I have been at this for days and I am at a complete lost. The repository has it that way, so I don't know what to do anymore. Anyway, thank you so much for your help.
Avatar
@Japanese cockle I guess I will never use stripe then. I have been at this for days and I am at a complete lost. The repository has it that way, so I don't know what to do anymore. Anyway, thank you so much for your help.
Avatar
It turns out i was wrong. Server Components cant do that but Server Actions can imported into Client Components. So this issue is related to something else.
Avatar
Japanese cockle
hmmm, okay, thanks again!