Next.js 默认Babel引起的server action出错

Next.js版本:"14.0.3"

众所周知，Next.js在V13版本中，其中有一个重大的更新就是server action------即服务器操作。

服务器操作是在服务器上执行的异步函数。它们可以在服务器和客户端组件中用于处理 Next.js 应用程序中的表单提交和数据变更。

客户端组件中使用server action

首先，需要创建一个新文件并在顶部添加指令use server。文件中的所有函数都将被标记为可在客户端和服务端组件重用的服务器操作：

ts 复制代码

// app/action.ts
"use server";

export const controllerBrowser = async (action: "open" | "close") => {
    // ....
};

tsx 复制代码

import { controllerBrowser } from '@/app/actions'
 
export function Page() {
  return (
    <Button onClick={()  => controllerBrowser("open)}/>
  )
}

需要注意：server action（服务器）操作必须是一个异步函数

问题复现

代码编写与官网要求一致，但是出现了问题，如图：

css 复制代码

Error:
  × Server actions must be async functions
    ╭─[D:\next-tools\app\scriptController\actions.ts:8:1]
  8 │     // }
  9 │     import _asyncToGenerator from "D:/next-tools/node_modules/next/dist/compiled/@babel/runtime/helpers/esm/asyncToGenerator.js";
 10 │     import _regeneratorRuntime from "D:/next-tools/node_modules/@babel/runtime/regenerator/index.js";
 11 │ ╭─▶ export var controllerBrowser = /*#__PURE__*/function () {
 12 │ │     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(s) {
 13 │ │       return _regeneratorRuntime.wrap(function _callee$(_context) {
 14 │ │         while (1) switch (_context.prev = _context.next) {
 15 │ │           case 0:
 16 │ │             return _context.abrupt("return", s);
 17 │ │           case 1:
 18 │ │           case "end":
 19 │ │             return _context.stop();
 20 │ │         }
 21 │ │       }, _callee);
 22 │ │     }));
 23 │ │     return function controllerBrowser(_x) {
 24 │ │       return _ref.apply(this, arguments);
 25 │ │     };
 26 │ ╰─▶ }();
    ╰────

stack overflow中的解决方法：删除.babelrc文件

那么删除.babelrc文件，Next项目是通过什么方法进行转译的呢？答案是SWC

The Next.js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files and Terser for minifying output bundles.

Next.js编译器是使用SWC用Rust编写的，允许Next.js转换和缩小你的JavaScript代码以用于生产。这取代了单个文件的 Babel 和缩小输出包的 Terser。

当你的应用程序有一个 .babelrc 文件时，Next.js 将自动回退到使用 Babel 来转换单个文件。这确保了与利用自定义 Babel 插件的现有应用程序的向后兼容性。

所以问题大概率已经猜到了，next/babel没有对server action进行处理，针对这一部分功能，我们需要使用SWC

问题解决

如果要在 .babelrc 文件存在的情况下使用 SWC，则可以在 next.config.js 文件中强制使用它。

js 复制代码

// next.config.js
module.exports = {
  experimental: {
    forceSwcTransforms: true,
  },
}