Next.js Discord

Discord Forum

client component buttons dont work second time

Answered
European anchovy posted this in #help-forum
Open in Discord
European anchovyOP
So, I'm trying to import ReactJS project to NextJS, so I'm new to it. One issue I don't understand is I have cookie banner. It works as expected, and buttons react. But when I reload page again, it doesn't work anymore. Buttons dont react (even if I put console.log on button actions, even though on first load (like in incognito), it will work.

This is from layout.js 



  return (
    <html lang={locale} >
      <body
        className={` antialiased`}
      >
       
        <NextIntlClientProvider messages={messages}>
          <ShowCookie locale={locale}/>

          {children}
        </NextIntlClientProvider>
        
      </body>
    </html>



"use client"

const { CookieMain } = require("./components/cookies/CookieMain");
import { useEffect } from "react";
import { useCookies } from "react-cookie";


const ShowCookie = ({locale}) => {
    const [cookies, setCookie] = useCookies(["cookieNeccessary", "cookieConsentOpen"]);
    console.log("show cookie loads ")

    return (
      (cookies.cookieNeccessary !== true || cookies.cookieConsentOpen) === true && <CookieMain locale={locale} />
    )
}

export default ShowCookie;


And suprisingly, on every reload, <ShowCookie, shows 2 times, console.log("show cookie loads ") . But buttons inside, dont work. Like in <CookieMain 

  useEffect(() => {
    console.log("Component Rendered!");
  }, []);


Shows only at first. Or when I delete site data. I've disabled cache in network dev tab as well, still same issue.
Answered by Sun bear
When importing, it is important to use the import method rather than require. CookieMain is currently imported using require.
View full answer

4 Replies

@European anchovy So, I'm trying to import ReactJS project to NextJS, so I'm new to it. One issue I don't understand is I have cookie banner. It works as expected, and buttons react. But when I reload page again, it doesn't work anymore. Buttons dont react (even if I put console.log on button actions, even though on first load (like in incognito), it will work. This is from layout.js return ( <html lang={locale} > <body className={` antialiased`} > <NextIntlClientProvider messages={messages}> <ShowCookie locale={locale}/> {children} </NextIntlClientProvider> </body> </html> "use client" const { CookieMain } = require("./components/cookies/CookieMain"); import { useEffect } from "react"; import { useCookies } from "react-cookie"; const ShowCookie = ({locale}) => { const [cookies, setCookie] = useCookies(["cookieNeccessary", "cookieConsentOpen"]); console.log("show cookie loads ") return ( (cookies.cookieNeccessary !== true || cookies.cookieConsentOpen) === true && <CookieMain locale={locale} /> ) } export default ShowCookie; And suprisingly, on every reload, <ShowCookie, shows 2 times, console.log("show cookie loads ") . But buttons inside, dont work. Like in <CookieMain useEffect(() => { console.log("Component Rendered!"); }, []); Shows only at first. Or when I delete site data. I've disabled cache in network dev tab as well, still same issue.
Sun bear
When importing, it is important to use the import method rather than require. CookieMain is currently imported using require.
Answer
European anchovyOP
aha, I see now. Now it works, thanks a lot
@European anchovy aha, I see now. Now it works, thanks a lot
Sun bear
No problem!
Right-click on my message, click on the app button and then the “Mark Solution” button