Unable to disable Strict Mode
Answered
skye 🎧 posted this in #help-forum
skye 🎧OP
This is a weird one, but I am entirely unable to disable Strict Mode in my project. My application needs to create accounts based on OAuth responses from Discord & the creation function is getting called twice which, while the schema prevents the second document from being created, fills the console with errors every time the page loads.
I've tried creating new config files, tried .mjs, .js and .ts config files but none of them fixed it. I also tried entirely recreating my project from scratch with updated dependencies and it didn't fix it either. No matter what I try, it gets called twice, and the
export default async function HomePage() {
const session = await auth();
if (!session) {
return (
<>
Click to login
<div>
<form
action={async () => {
"use server";
await signIn("discord", { redirectTo: "/" });
}}>
<button type="submit">Login with Discord</button>
</form>
</div>
</>
);
} else {
const discord = session.user!;
const id = discord!.image!.substring(35, 52); // Hacky method to get ID because Auth.js sucks
let user = await getOrCreateUserByDiscord(Number.parseInt(id));
return (
<>
<div className="bg-gray-900">
Hi <b>{session.user?.name}</b>
<br />
<br />
{user != null
? `Your objectId is ${user._id}`
: `no user exists`}
<br />
<br />
Click to logout
<div>
<form
action={async () => {
"use server";
await signOut();
}}>
<button type="submit">Log out</button>
</form>
</div>
</div>
</>
);
}
}
export async function getOrCreateUserByDiscord(id: Number): Promise<IUser> {
await database();
console.log("called"); // Debug line
return await User.findOne({ discord: id }).then(
(doc) => doc || User.create({ _id: new Types.ObjectId(), discord: id })
);
}
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactStrictMode: false,
};
export default nextConfig;
I've tried creating new config files, tried .mjs, .js and .ts config files but none of them fixed it. I also tried entirely recreating my project from scratch with updated dependencies and it didn't fix it either. No matter what I try, it gets called twice, and the
called
string is logged to console twice.Answered by skye 🎧
found the issue sorry! layout.tsx from the template i used referenced the page component directly instead of
{children}
& i never updated it6 Replies
this is a server component. server component do not get remounted in strict mode like client components because server components just... don't mount, mounting is a client-side concept.
you are probably calling the function
getOrCreateUserByDiscord
twiceskye 🎧OP
i can’t see how though. this is the only call to the function
Do you happen to import the HomePage function and use it elsewhere
skye 🎧OP
no it’s only referenced in layout.tsx, i tried putting this code in an entirely new component and it has the same behaviour
skye 🎧OP
found the issue sorry! layout.tsx from the template i used referenced the page component directly instead of
{children}
& i never updated itAnswer