Next.js Discord

Discord Forum

Server actions must be async functions

Answered
Somali posted this in #help-forum
Open in Discord
SomaliOP
I keep receiving the error Server actions must be async functions while the functions are indeed async.

After searching around, I have noticed that some suggest to remove babel config, but I need that file, otherwise other parts of the app break.

Is there something I can do to make the error go away and use my action?
Answered by Somali
However it is now fixed. I found out that it is a problem with babel presets.

After adding an extra configuration to my next/babel preset, everything worked out fine!

.babelrc
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": { "chrome": 117 },
        },
      },
    ],
  ],
View full answer

8 Replies

SomaliOP
"use server";

import Database from "@/Database";
import { user } from "@/Database/schema";

export async function checkData() {
  console.log("hello");
  try {
    const a = await Database.select().from(user);
    console.log(a);
  } catch (e) {
    console.log("hello world");
  }
}

// export async function insertData() {
//   //   const a = await Database.insert(user).values({ role: "admin" });
//   //   console.log(a);
//   await new Promise(() => {});
// }
Thanks in advance ❤️
Forgot to mention: this happens when I import the function in a client component
"use client";

import { Box, Button, ButtonProps, LinkProps, Typography } from "@mui/material";
// import { checkData, insertData } from "./actions";
import { useEffect } from "react";

const Dashboard = () => {
  useEffect(() => {
    checkData();
  }, []);
  return (
    <Box>
      <Typography component="h1" variant="h2" sx={{ mb: 1 }}>
        Dashboard
      </Typography>
      <Box sx={{ mt: 2, display: "flex", justifyContent: "center" }}>
        <Button href="?open" variant="contained" replace>
          Menu
        </Button>
      </Box>
    </Box>
  );
};

export default Dashboard;
joulev
That’s weird… are you sure this is the file with the error? What does the error say in full?
SomaliOP
This is the error that I used to receive.
SomaliOP
However it is now fixed. I found out that it is a problem with babel presets.

After adding an extra configuration to my next/babel preset, everything worked out fine!

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