Next.js Discord

Discord Forum

Unable to disable Strict Mode

Answered
skye 🎧 posted this in #help-forum
Open in Discord
Avatar
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.

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 it
View full answer

6 Replies

Avatar
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 twice
Avatar
i can’t see how though. this is the only call to the function
Avatar
Do you happen to import the HomePage function and use it elsewhere
Avatar
no it’s only referenced in layout.tsx, i tried putting this code in an entirely new component and it has the same behaviour
Avatar
found the issue sorry! layout.tsx from the template i used referenced the page component directly instead of {children} & i never updated it
Answer