#Getting a weird error on new nextjs app.

28 messages · Page 1 of 1 (latest)

tough totem
# 
- wait compiling /favicon.ico/route (client and server)...
- event compiled successfully in 33 ms (292 modules)
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1910:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function} className=... children=...>
                  ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
null
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1910:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function} className=... children=...>
                  ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
digest: "3338950040"
null

from this code :

            <button onClick={() => console.log("hi")} className="py-3 px-32 bg-secondary rounded-xl font-bold text-2xl text-primary">
              Website
            </button>
topaz aspen
#

Are you in a server component ?

#

You cannot use onClick if you are

tough totem
#

I just created a new react project

#

and made changes to the default welcome page

topaz aspen
#

You have to put "use client"

tough totem
# 
import Image from 'next/image'

export default function Home() {

  return (
    <main className="bg-primary text-white text-center h-screen w-full">
      <div className="p-5 flex justify-center items-center h-screen w-full">
        <div>
          <div className="flex justify-center">
            <img src="https://cdn.discordapp.com/attachments/1090412190823104573/1104427185844007002/Untitled437_20230506121829.png" alt="logo" className="w-[100px] mb-5 border border-[3px] border-secondary rounded-full" />
          </div>
          <p className="text-xl font-bold">@Max_Wolf</p>
          <div className="flex flex-col w-full space-y-3 mt-5">
            <button onClick={() => console.log("hi")} className="py-3 px-32 bg-secondary rounded-xl font-bold text-2xl text-primary">
              Website
            </button>
            <a href="https://discord.gg/rmRWESqPRd" className="py-3 bg-secondary rounded-xl font-bold text-2xl text-primary">
              Discord
            </a>
            <a href="https://twitter.com/Max_Wolfx3?t=Kb4h-k4aVmyTEGh4wRKa8w&s=09" className="py-3 bg-secondary rounded-xl font-bold text-2xl text-primary">
              Instagram
            </a>
            <a href="https://instagram.com/max_wolfx3?igshid=ZGUzMzM3NWJiOQ==" className="py-3 bg-secondary text-border-1 font-bold rounded-xl text-2xl text-primary">
              Twitter
            </a>
          </div>
        </div>
      </div>

    </main>
  )
}
topaz aspen
#

At the top of the page.tsx

tough totem
#

Ohhh

topaz aspen
#

Put: "use client"

#

Over import Image ...

tough totem
#

Ok

topaz aspen
#

You are in server component right now

#

It setup the page to client component

tough totem
#

yeah this is not valid

topaz aspen
#

With double quote

#

Like ""

tough totem
#

kk

#

Is this a new nextjs thing?

#

I usually didint have to do this

topaz aspen
#

Kind of

#

Nextjs13 introduce server component

tough totem
#

oh

topaz aspen
#

You should read the documentation, a lot of thing has changed