#useActionState not working as described in documentation

12 messages · Page 1 of 1 (latest)

sick oracle
#

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.

harsh vesselBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

brisk kettle
sick oracle
#

Ah

#

Where is it coming from then

#

My dev console only traces the errors back to a chunk file within next.js itself

sick oracle
#
⨯ 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)
brisk kettle
#

Do a project search of formAction, that'll let you see where you might have misplaced it.

sick oracle
#

Ahh, I was accidentally feeding it as one of the props of my new widget

#

thanks