Can't use server actions with default next babel setup

[tmeasday]

Link to the code that reproduces this issue

https://github.com/tmeasday/next-babel-server-actions-bug

To Reproduce

1. Clone repro repo tmeasday/next-babel-server-actions-bug
2. yarn dev
3. Visit http://localhost:3000/test
4. You'll see

  × Server actions must be async functions
   ╭─[/Users/tom/GitHub/tmeasday/next-babel-server-actions-bug/app/test/action.ts:2:1]
 2 │
 3 │ import _asyncToGenerator from "/Users/tom/GitHub/tmeasday/next-babel-server-actions-bug/node_modules/next/dist/compiled/@babel/runtime/helpers/esm/asyncToGenerator.js";
 4 │ import _regeneratorRuntime from "/Users/tom/GitHub/tmeasday/next-babel-server-actions-bug/node_modules/@babel/runtime/regenerator/index.js";
 5 │ export function action() {
   ·                 ──────
 6 │   return _action.apply(this, arguments);
 7 │ }
 8 │ function _action() {
   ╰────

Workarounds (you'll need to delete .next before trying each):

1. Use SWC -- delete .babelrc
2. Target latest chrome -- change .babelrc to:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": { "chrome": 117 }
        }
      }
    ]
  ]
}

Current vs. Expected behavior

Server actions should work with Next's out-of-the-box babel config, ideally even if the browser targets were older too!

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 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.18
  pnpm: 8.6.2
Relevant Packages:
  next: 14.0.2-canary.9
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

App Router

Additional context

No response

[psdewar]

I also see the same bug. This is what my babel.config.js looks like:

module.exports = {
  presets: ["next/babel"],
  plugins: [["react-native-web", { commonjs: true }]],
};

Removed the file without additional changes and it worked fine. From https://stackoverflow.com/questions/76454781/nextjs-server-action-function-fail-to-compile-with-babel-in-client-component, seems like server actions are not supported with babel yet?

[smithmanny]

This error just popped up for me on 14.1.4 when trying to run build. I don't have any babel plugins installed or anything but I got it working again by downgrading back down to 14.1.0

[baba43]

I get the same error

[konstantin403]

hey guys faced with the same issue, the problem was that I was try to import server component into client component, fixed this by import server action into server component and pass down into a tree into client side component where it's need to be called

[javascripter]

Confirmed this issue exists as of Next.js 15.0.0-rc.0.

[arnoBruynseels]

How is it possible that this still is an issue a year later?

[coredevel]

Experienced this issue yesterday too, I imagine the majority of users use SWC but for cases where we need a custom babel plugin this is quite a blocker when using server actions!

[arnoBruynseels]

This issue doesn't get the attention that it deserves as it prevents you from using one of the core functionalities NextJS has to offer.

People who are currently forced to use a Babel config for one reason or another are heaviliy restricted this way.
(Not only this particular issue but others aswell that comes with a custom Babel config)

In my case we are forced to use a Babel config because we use StyleX that currently has no (official) SWC integration.

(Although there is a community made one but is still very early in development and experimental)