TypeError: value.forEach is not a function when use server action on local

[nottnt]

Link to the code that reproduces this issue

https://github.com/nottnt/nextjs-dashboard

To Reproduce

I implemented next dashboard by this chapter mutating-data

code that I implemented: app/ui/invoices/buttons.tsx

app/lib/actions.ts

Current vs. Expected behavior

current: I found this error when I use server action on local build but it's work at vercel server

expect: I want to know how to solve it?

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:11:05 PDT 2024; root:xnu-10063.101.17~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.20.1
  npm: 10.5.2
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

I try to remove yarn.lock and node_module before update my node version from v18.17.1 to v20.13.1 and these package next@latest react@latest react-dom@latest eslint-config-next@latest and follow this instruction https://github.com/vercel/next.js/issues/55932

it's not work as well I'm not sure is it bug?

My package.json

{
 "private": true,
 "scripts": {
   "build": "next build",
   "dev": "next dev",
   "prettier": "prettier --write --ignore-unknown .",
   "prettier:check": "prettier --check --ignore-unknown .",
   "seed": "node -r dotenv/config ./scripts/seed.js",
   "start": "next start"
 },
 "dependencies": {
   "@heroicons/react": "^2.0.18",
   "@tailwindcss/forms": "^0.5.7",
   "@types/node": "20.5.7",
   "@vercel/postgres": "^0.5.0",
   "autoprefixer": "10.4.15",
   "bcrypt": "^5.1.1",
   "clsx": "^2.0.0",
   "next": "^14.2.3",
   "postcss": "8.4.31",
   "react": "^18.3.1",
   "react-dom": "^18.3.1",
   "tailwindcss": "3.3.3",
   "typescript": "5.2.2",
   "use-debounce": "^10.0.0",
   "zod": "^3.22.2"
 },
 "devDependencies": {
   "@types/bcrypt": "^5.0.1",
   "@types/react": "18.2.21",
   "@types/react-dom": "18.2.14",
   "@vercel/style-guide": "^5.0.1",
   "dotenv": "^16.3.1",
   "eslint": "^8.52.0",
   "eslint-config-next": "^14.2.3",
   "eslint-config-prettier": "9.0.0",
   "prettier": "^3.0.3",
   "prettier-plugin-tailwindcss": "0.5.4"
 },
 "engines": {
   "node": ">=20.x"
 }
}

[JesseKoldewijn]

Have you checked the value of "value" in your case? Could it be undefined or something other than an iterable?

[nottnt]

Have you checked the value of "value" in your case? Could it be undefined or something other than an iterable?

This issue will disappear when I change the implementation way that without 'form' tag (use onClick instead). So, when click button to delete invoice that use server action way (submit form that bind server action function to delete invoice) I found this issue

[nottnt]

i found the way to solve it, bro @JesseKoldewijn

• remove node_module by rm -rf node_modules/ command
• clean yarn cache by yarn cache clean command
• change the node version to more than 20 version
• re-install dependencies by yarn

i'm not sure. it may cause with FormData API when using next server action with form element

so sorry to waste your time 🙇

[nottnt]

oh sorry I’m forgot to tell you @JesseKoldewijn . it works on chrome but still fail on Microsoft Edge

https://github.com/vercel/next.js/assets/33511398/adafe785-2d49-4637-a6e0-0f66d6f9992f

https://github.com/vercel/next.js/assets/33511398/6a4ed3a3-1d1d-429b-9a60-b78d68ae9b43

[nottnt]

testing on prod. it works both on chrome and edge

production url

[JesseKoldewijn]

I can take a look at it later this week. And hey! don't feel bad, I'm happy to help man 🤙

[nextjs-bot]

This issue has been automatically marked as stale due to inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!