Server Actions
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Hello folks, trying to create a server action inside my server page and getting "InternalError: too much recursion"
31 Replies
Brown bearOP
...
const MarkAsPaid = async () => {
'use server';
console.log('Mark as paid');
};
return <button onClick={MarkAsPaid}>CLICK</button>;
...@Brown bear
...
const MarkAsPaid = async () => {
'use server';
console.log('Mark as paid');
};
return <button onClick={MarkAsPaid}>CLICK</button>;
...
did you use
MarkAsPaid in other places?Brown bearOP
nope
Do you have a reproduction repository
Brown bearOP
Using next 13.4.19
Can you make one?
Brown bearOP
No, I can't I mean I am developing for my current job
How can I debug this?
I have the right flag on my nextjs.config
of course you can. Its a minimal reproduction respository
im not asking you to publish your company's repository
What i meant to say is, create a new project and try to reproduce the bug, and then publish it
seems like a bug to me
Brown bearOP
give me 5
take your time
just quick guessing, have you tried with
async function instead of const ... = async () => {}?Brown bearOP
let me try
Nope same
The same issue happens here
Check it out @aardani
And many thanks btw
intersting
Brown bearOP
any idea?
@Brown bear any idea?
I think its conflicting with the React's RSC rule to not pass Class/function from Server -> Client
This is the error i got when checking dev tool
which then are called endlessly
hence that error
One workaround is:
'use client'
import { useEffect } from "react"
export default function ClientComponent(p) {
function handleClick() {
p.onClick()
}
return (
<button onClick={handleClick}>
Click Me!
</button>
)
} ### usage
### or
import Image from 'next/image'
import styles from './page.module.css'
import ClientComponent from './client'
export default function Home() {
return (
<main>
<ClientComponent onClick={async () => {
"use server"
console.log("Test")
}}>Click Me!</ClientComponent>
</main>
)
}### or
import Image from 'next/image'
import styles from './page.module.css'
import ClientComponent from './client'
export default function Home() {
async function testFn() {
"use server"
console.log("Test")
}
return (
<main>
<ClientComponent onClick={testFn}>Click Me!</ClientComponent>
</main>
)
}