#jake19x
vital willow
will come back shortly, but can you move the other message into this thread please
woven herald
Hello 🙂 @halcyon bane and everyone, I am currently integrating Stripe TypeScript 'donate-with-elements' into my Next.js 13 app router project. I found a reference from the official Next.js GitHub repository, specifically the example with Stripe TypeScript.
When I run the Stripe app on its own, it works perfectly fine both locally and when deployed on Vercel. However, when I import it into my existing project, I encounter issues specifically with the /actions/stripe.ts file. I am unable to resolve the error occurring in this file, and it seems to be related to the 'use server' directive. I have ‘use server’ at the top, but I am unsure how to properly handle this directive in the context of my client components.
I have made several attempts to resolve this issue by referring to the Stripe documentation, GitHub repositories, Vercel's documentation, and other resources, but I have not been able to make the Stripe payment functionality work correctly.
I have reached out to Stripe support and even consulted with their developers, but I have not yet found a solution. I am eager to find a way to make this integration work or explore alternative solutions that can provide similar functionality.
If anyone has any suggestions or insights, I would greatly appreciate your input.
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
I moved into here and deleted the other posts
vital willow
Thanks -- ok, take a step back, are you trying to do something server side/back end , or client side UI (eg, using Elements)?
It sounds like this is an issue with react server components, potentially, I'm not fully up to speed on the usage there
steel patrolBOT
vital willow
I ask because it seems like you're trying to use Elements but you're also importing 'stripe' which is the back end node SDK
woven herald
I was hoping to get Jonathan Steele to help me, as he made the last commit on the git hub repository that I am using at https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts.
He replied, but I was not available. He told me to make sure that I add 'use server', but I already have that, just like the code in the link above.
Here is the complete project that I am using: https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript
I already tested this alone and it works perfect.
When I add to my existing project, it throws that error. That is the only file that I have in my project that has 'use server', so I think it is some kind of conflict with my 'use client' components.
All the references and tutorials show the import 'stripe' for Next.js projects
shadow quiver
Hello, looking in to this. Can you link to the GH issue or wherever that this conversation happened? Still trying to understand the context of what you are building
vital willow
I think this is going to be something pretty specific to Next infra assumptions and react server components
Glad to hear the example works as expected out of the box, at least
Why it causes issues when you're using part of it in your app I'm not sure we can speak to too much
When I add to my existing project, it throws that error
Add what, specifically?
Where exactly are you looking in the example, and what parts are you using? This is illustrative, not something you can use wholesale
For example, see the ElementsForm uses @stripe/react-stripe-js, not stripe
https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/components/ElementsForm.tsx#L6-L11
The actions.ts file you link to is a server / back-end handler, I believe for "serverless" actions
Seems similar/realted to this issue open on the repo currently, possibly: https://github.com/vercel/next.js/issues/43700
vital willow
I'd suggest sharing a complete reproduction of this with minimal other code to demonstrate the issue and error and allow others to inspect it. With that, you can file an issue with Next or react-stripe-js depending on the error. The error you shared before:
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.
Is not a Stripe error, that's a Next/react server component error
steel patrolBOT
woven herald
@vital willow @shadow quiver Thanks for your help! Here is the link: https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript
I cloned that repository, tested locally and deployed to Vercel, everything works perfect.
As soon as I import it into my other project, it does not work anymore.
The original code works as is with the 'use server' mixed with the components that have 'use client', but for some reason, not in my current project.
I enabled the server actions, installed server-only, etc.
Is there another way to edit the 'server' files to make them work?
I tried many different solutions and had problems with the UI appearing, also the .js from stripe payment elements custom flow did not work. I finally found this repository and like I said it worked flawlessly by itself, then I copied into my existing project and it will not get past this error. The other solutions did not use this 'server' in the code, it was just api, but I could never get those to function correctly.
I was able to add the paypal payment in a few minutes, but I like the stripe UI and functionality better... if I can only get it to work, lol
tardy bolt
@woven herald okay sorry but no one online knows about this. I'd recommend writing to our support team, provide all the information and then someone on my team familiar with your environment can help. You can contact support here: https://support.stripe.com/contact
woven herald
@tardy bolt It's hard for me to believe that "no one online knows about this". I have already contacted stripe support and talked with stripe, tech support and developers, then they sent me here again. I was hoping to get some help from @rapid sigil, since he made the last commit on the exact code that I am using. None of the code on the stripe website in the stripe doc works with my Next.js 13 app router typescript projects.
tardy bolt
Sure I understand, and they are not around. So if you contact our support team with the detailed information you now have, then someone on my team familiar with this can help. Discord support is real time and not everyone around knows every single language or framework, and right now most people around on my team have never used this framework and don't know how to help you.
So the next step is to contact our support team (or bump your ask with them if you have one) and ask to talk to an engineer and then someone on my team will be able to help
woven herald
Ok I guess will try the same thing that I have already tried 5 times, again.