Cannot access logger.error on the server due to client module import

[pawvan]

Description:
I encountered an issue with the following code in my Next.js application:

tsx
Copy code
import { getServerSession } from "next-auth";
import { authConfig } from "@/lib/auth";
import { redirect } from "next/navigation";
import { CredentialsForm } from "@/components/credentialsForm";
import { GoogleSignInButton, GithubSignInButton } from "@/components/authButtons";

export default async function SignInPage() {
const session = await getServerSession(authConfig);

console.log("Session: ", session); // Error triggered here

if (session) return redirect("/page-1");

return (

Sign In

Or

);
}
Error Message:

vbnet
Copy code
Error: Cannot access logger.error on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
Steps to Reproduce:

Use console.log or similar logging functions in a server component.
Import client modules or components in the same server component.
Expected Behavior:

console.log should work without error in the server component, or Next.js should provide a clearer way to debug server-side code without causing import issues.

Actual Behavior:

The code triggers an error because console.log is being used in a server component where client-side imports or code are being mixed.

Additional Information:

Next.js version: [v20.16.0]
Node.js version: [14.2.7]