Action error: NextNavigation.useRouter is not a function

[marsh warren]

whenever I use server action and useRouter together, I end up with this error on the latest version of next/react/react-dom

"use client";
import { createGame } from "@/actions/create_game";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

export function CreateGameButton() {
  const router = useRouter();
  const handleCreateGame = async (event: React.MouseEvent) => {
    event.preventDefault();
    const game = await createGame();
    const gameId = game?.data?.id;
    if (!gameId) return;
    router.push(`/games/${gameId}`);
  };
  return <Button onClick={handleCreateGame}>Create Game</Button>;
}

[tough siren]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[wary valve]

Have you tried to use redirect() inside the Server Action instead of router.push()?

[marsh warren]

I mean, that works but I want to do client side routing here

this is just a small snippet to demonstrate the problem

I remember this working before (might be misremembering) so suddenly not seems odd.

googling doesn't show any result. Searching here doesn't either. 🤔

[wary valve]

Be patient the thread just opened.

That code snippet looks good to me. Are you sure the problem shows up when you do exactly that?

[marsh warren]

yeah

Sorry, I did not mean to appear impatient. just making sure you don't waste time googling or searching around when I already did on the same error.

[wary valve]

If this is somewhat documented on Next.js docs you should try here https://discord.com/channels/752553802359505017/1089389297548931182

[marsh warren]

I did before opening the thread here.

[wary valve]

😭

[marsh warren]

Nothing found on github, discord and other areas I can google.

[glacial void]

I end up with this error
what's the error?

[marsh warren]

Action error: NextNavigation.useRouter is not a function

[glacial void]

please remove the event.preventDefault(); for a moment. If you remove the server action, does it work correctly?

[marsh warren]

so I got it working

but essentially I don't know how

the problem seems to be related to turbopack flag

I removed the turbopack flag in next dev command, deleted the cache, package-lock and other generated details

restarted with next dev only without turbopack

and it works

(previously, I deleted .nextjs and node_modules folder multiple times to see if that could fix it but it did not)