I'm currently facing a problem in my Next.js application where the console.log and alert functions are not functioning as intended. Despite checking the code, browser settings, and environment thoroughly, pinpointing the root cause of the issue remains elusive. Here's an overview of the situation:
For debugging purposes, I employ console.log statements within my code. However, no output is visible in the developer console of the browser when these statements are included. Furthermore, the alert function fails to generate pop-up alerts as expected.
Node.js Version: 18.17.1 Next.js Version: 13.5.4 typescript": ^5
Errors and Warnings displayed in the browser's developer console:
invariant expected app router to be mountedThe following snippet showcases the most pertinent details (extracted for clarity):
\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>
);
}
`
Various troubleshooting measures have been attempted, such as rebuilding the application and conducting tests in incognito mode; however, the issue persists. Interestingly, when the same code file was tested on another Next.js application within the same browser, the console.log and alert functions operated as anticipated.
A potential hypothesis is that the problem might stem from the project's configuration or dependencies. Thus, any guidance in identification and resolution of this issue would be immensely valued. Thank you.