Next.js Discord

Discord Forum

useActionState not working as described in documentation

Answered
illegitimate-egg posted this in #help-forum
Open in Discord
Avatar
illegitimate-eggOP
Prelude: I am using react 19, I checked
Both the next.js docs and the react docs say that it should work something like this (taken directly from the react docs)
import { useActionState } from 'react';
import { action } from './actions.js';

function MyComponent() {
  const [state, formAction] = useActionState(action, null);
  // ...
  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

My own implementation could not be more similar, I'm even using extremely similar function definitions to try and reduce as many mistakes as possible, it looks like this (taken directly from source)
"use client"

import { useActionState } from "react"
import { submitAction } from "./api/submitData/action"

const initialState = {
    message: '',
}

export default function Megaform(props) {
    const [state, formAction] = useActionState(submitAction, initialState);

    return (
        <div>
            <p aria-live="polite">{state?.message}</p>
            <form action={formAction} {...props}>
                {props.children}
            </form>
        </div>
    )
}

Somehow though, I am told that Error: formAction is not defined. How can this be possible, it's defined right there! Please help. Thanks in advance.
Answered by Miniature Pinscher
Do a project search of formAction, that'll let you see where you might have misplaced it.
View full answer

10 Replies

Avatar
Miniature Pinscher
You're not getting your error from this piece of code.
Avatar
illegitimate-eggOP
Ah
Where is it coming from then
My dev console only traces the errors back to a chunk file within next.js itself
Avatar
Miniature Pinscher
Send the entire trace.
Avatar
illegitimate-eggOP
⨯ ReferenceError: formAction is not defined
    at Home (C:\Users\REDACTED\Documents\REDACTED\REDACTED\.next\server\chunks\ssr\[root of the server]__ae5eb0._.js:270:37)
digest: "4113314694"
Call stack:
Call Stack
Home
C:\Users\REDACTED\Documents\REDACTED\REDACTED\.next\server\chunks\ssr\[root
resolveErrorDev
file:/C:/Users/REDACTED/Documents/REDACTED/REDACTED/.next/static/chunks/node_modules_next_dist_compiled_107ce8._.js (3661:65)
processFullStringRow
file:/C:/Users/REDACTED/Documents/REDACTED/REDACTED/.next/static/chunks/node_modules_next_dist_compiled_107ce8._.js (3823:23)
processFullBinaryRow
file:/C:/Users/REDACTED/Documents/REDACTED/REDACTED/.next/static/chunks/node_modules_next_dist_compiled_107ce8._.js (3811:29)
progress
file:/C:/Users/REDACTED/Documents/REDACTED/REDACTED/.next/static/chunks/node_modules_next_dist_compiled_107ce8._.js (3931:102)
Avatar
Miniature Pinscher
Do a project search of formAction, that'll let you see where you might have misplaced it.
Answer
Avatar
illegitimate-eggOP
Ahh, I was accidentally feeding it as one of the props of my new widget
thanks