我的Next.js应用程序遇到了一个问题，console.log和alert都没有按预期运行。我已经检查了代码，浏览器设置和环境，但我无法找到问题所在。以下是详细信息：
我使用console.log进行调试。但是，当我在代码中添加console.log语句时，在浏览器的开发人员控制台中看不到预期的输出。此外，警报功能没有显示弹出警报。
Node.js版本：18.17.1 Next.js版本：13.5.4 typescript ”：^5
来自浏览器开发者控制台的错误和警告：invariant expected app router to be mounted
下面是代码。（我简化了它，以携带最相关的细节）
\mooneducationcenter\src\app\addteam\page.tsx
`

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function AddTeam() {
  console.log("## This is console message ##");

  const [name, setName] = useState("");

  const router = useRouter();

  const handleSubmit = async (e:any) => {
    e.preventDefault();

    if (!name) {
      alert("Name is required.");
      return;
    }

    try {
      const res = await fetch("http://localhost:3001/api/teams", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({ name }),
      });

      if (res.ok) {
        router.push("/");
      } else {
        throw new Error("Failed to create a team");
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <input
        onChange={(e) => setName(e.target.value)}
        value={name}
        className="border border-slate-500 px-8 py-2"
        type="text"
        placeholder="Name"
      />
      
      <button
        type="submit"
        className="bg-green-600 font-bold text-white py-3 px-6 w-fit"
      >
        Add Member
      </button>
    </form>
  );
}
`

我已经尝试了一些故障排除步骤，包括重建应用程序和在隐身模式下进行测试，但问题仍然存在。
当我在同一个浏览器中用另一个nextjs应用程序尝试相同的代码文件时，console.log和alert就像我预期的那样工作。
我怀疑这个问题可能与项目的配置或依赖关系有关。如能协助查明和解决这一问题，将不胜感激。谢谢