Next.js Discord

Discord Forum

Next 13.5 "use client" doesn't work

Unanswered
Cape May Warbler posted this in #help-forum
Open in Discord
Cape May WarblerOP
Given code:
"use client"
import { Game } from "@/lib/game"
import { useEffect } from "react";

export default function GameContainer() {
    useEffect(() => {
        console.log("rendering");
        const game = new Game(document.querySelector("#game")!);
        game.start();
    }, [])
    return (
        <div id="game">
            <div id="stats"></div>
            <div id="pet"></div>
        </div>
    )
}

Doesn't run on client side, but if I put console.log outside of useEffect I get console log to the terminal as if it was run on server side. Component is correctly imported, I even tried importing it like so but it didn't work neither
  const GameContainer = dynamic(import("@/components/game-container"), {ssr: false});

I'm using latest version of next, installed just now

11 Replies

"use client" can be confusing. It doesn't mean everything runs on the client. It just means the component needs interaction and hydration. It still will be server side rendered as much as possible.

imo the react team chose the wrong wording. It should be called something more like "use interactive" or something like that to reduce confusion.
Cape May WarblerOP
Okay but either @KINXZ way my console.logs previously were running on client even outside useEffect, and now neither they run inside nor outside useEffect so I still have issue
Cape May WarblerOP
You are using next 13.5.1, using create-next-app installs 13.5.4
ok
i will install 13.5.4 and try again
Cape May WarblerOP
Anyway. I will try to manually downgrade my next version, it might be the answer
works with 13.5.4 too
Cape May WarblerOP
That's strange. I haven't tried oldest trick in the book yet, will see if restarting my machines will help anyhow
you can try to just delete the .next directory
this should clear all caches