Upgrading @types/react to the latest causes an error with the auth actions

[mhamill2]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:36 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.10.0
  npm: 10.9.0
  Yarn: 1.22.21
  pnpm: 9.12.3
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-supabase

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When upgrading to a newer version of @types/react, the formAction on the Button component no longer accepts the signUp action as a valid type. I receive the following error message:

Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
    Type 'Promise<{ error: string; }>' is not assignable to type 'void | Promise<void>'.
      Type 'Promise<{ error: string; }>' is not assignable to type 'Promise<void>'.
        Type '{ error: string; }' is not assignable to type 'void'.ts(2322)
index.d.ts(3144, 9): The expected type comes from property 'formAction' which is declared here on type 'IntrinsicAttributes & ButtonProps & RefAttributes<HTMLButtonElement>'
(property) ButtonHTMLAttributes<HTMLButtonElement>.formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined

This is happening at least in the sign-up page when passing signUpAction to the formAction on the submit button.

Expected Behavior

The action function should still be a valid type when upgrading @types/react

To Reproduce

1. npx create-next-app -e with-supabase
2. Upgrade @types/react to 18.3.12 and install packages
3. See that the type is no longer valid for the formAction

[samcx]

@mhamill2 Did you upgrade the other packages as well? Not having an issue.

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "autoprefixer": "10.4.20",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "geist": "^1.2.1",
    "lucide-react": "^0.456.0",
    "next": "latest",
    "next-themes": "^0.4.3",
    "prettier": "^3.3.3",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "@types/node": "22.9.0",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "postcss": "8.4.49",
    "tailwind-merge": "^2.5.2",
    "tailwindcss": "3.4.14",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.6.3"
  },
  "packageManager": "[email protected]"
}

[mhamill2]

@samcx Yeah I'm not seeing any issues when running the dev server, however I see a typescript error in the app/(auth-pages)/sign-up/page.tsx file. I copied and installed your dependencies exactly and I still see the error.

# cd app/\(auth-pages\)/sign-up 
# npx tsc --noEmit 
page.tsx:42:25 - error TS2322: Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '(formData: FormData) => Promise<{ error: string; }>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
    Type 'Promise<{ error: string; }>' is not assignable to type 'void | Promise<void>'.
      Type 'Promise<{ error: string; }>' is not assignable to type 'Promise<void>'.
        Type '{ error: string; }' is not assignable to type 'void'.

42           <SubmitButton formAction={signUpAction} pendingText="Signing up...">
                           ~~~~~~~~~~

  ../../../node_modules/@types/react/index.d.ts:3144:9
    3144         formAction?:
                 ~~~~~~~~~~
    The expected type comes from property 'formAction' which is declared here on type 'IntrinsicAttributes & ButtonProps & RefAttributes<HTMLButtonElement> & { pendingText?: string | undefined; }'


Found 1 error in page.tsx:42

package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@supabase/ssr": "latest",
    "@supabase/supabase-js": "latest",
    "autoprefixer": "10.4.20",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "geist": "^1.2.1",
    "lucide-react": "^0.456.0",
    "next": "latest",
    "next-themes": "^0.4.3",
    "prettier": "^3.3.3",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "@types/node": "22.9.0",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "postcss": "8.4.49",
    "tailwind-merge": "^2.5.2",
    "tailwindcss": "3.4.14",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.6.3"
  },
  "packageManager": "[email protected]"
}

[samcx]

@mhamill2 The issue is with this return →

next.js/examples/with-supabase/app/actions.ts

Line 15 in 2cd75cc

return { error: "Email and password are required" };

.

Pushing up a fix!

[samcx]

• x-ref: examples(with-supabase): fix action type error #72783

[icyJoseph]

For reference, the React type did introduce some stronger inference right?

• [react] Explicitly allow async Form Actions DefinitelyTyped/DefinitelyTyped#70197

So like, if you pass the server action directly to a form tag, then TypeScript wants to enforce a void return type, since React doesn't really consume whatever is returned... but if, for example, you used useActionState, then you could consume the return type, and then it'd be allowed to have anything else than void.

[samcx]

For reference, the React type did introduce some stronger inference right?

I believe so!