#error

1 messages · Page 1 of 1 (latest)

wraith pebble
# 
import "bootstrap/dist/css/bootstrap.min.css";
import "./global.css";
import GoogleAnalytics from "@components/General/GAnalytics/GoogleAnalytics";
import dynamic from 'next/dynamic'
const CookieBanner = dynamic(() => import('../components/General/GAnalytics/CookieBanner'), { ssr: false, suspense: true })
const GID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS;

export const metadata = {
  title: "PayBridge Technologies - Home",
  icons: {
    icon: "/img/favicon.ico",
    apple: "/img/apple-touch-icon.png",
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head/>
      <GoogleAnalytics GA_MEASUREMENT_ID={GID}/>
      <body>
        {children}
        <CookieBanner/>
      </body>
    </html>
  );
}

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

clever domeBOT
#

Hi @wraith pebble. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you're seeing, NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node, is a common JavaScript error that occurs when you're trying to remove a DOM node that is not a child of the node you're calling removeChild on.

However, based on the provided extracts, it's not clear where this error is coming from in your code. The error might be occurring in one of your components (GoogleAnalytics or CookieBanner), or it could be a result of how these components are being used in your RootLayout component.

To debug this issue, you could start by checking the GoogleAnalytics and CookieBanner components to see if they're trying to manipulate the DOM in a way that could cause this error. For example, they might be trying to remove a DOM node that they didn't create, or that has already been removed.

If you're unable to find the issue in these components, you could try temporarily removing them from your RootLayout component to see if the error still occurs. If the error goes away when you remove these components, that would suggest that the issue is in one of these components.

If the error is not in these components, it could be in some other part of your application. In that case, you might need to use a process of elimination to find the issue.

Unfortunately, without more information, it's hard to provide a more specific solution. If you're still having trouble, you might find it helpful to look at the Next.js error handling documentation (https://nextjs.org/docs/app/building-your-application/routing/error-handling) for more information on how to handle and debug errors in Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wraith pebble kapa.ai is still learning and improving, please let us know how it did by reacting below

wraith pebble
#

@clever dome
heres cookie banner

'use client';

import Link from 'next/link';
import Image from "next/image";
import { getLocalStorage, setLocalStorage } from '@lib/GAnalytics/storageHelper';
import { useState, useEffect } from 'react';
export default function CookieBanner() {
    const [cookieConsent, setCookieConsent] = useState(false);
    useEffect (() => {
        const storedCookieConsent = getLocalStorage("cookie_consent", null)
        setCookieConsent(storedCookieConsent)
    }, [setCookieConsent])
    useEffect(() => {
        const newValue = cookieConsent ? 'granted' : 'denied'
        window.gtag("consent", 'update', {
            'analytics_storage': newValue
        });
        setLocalStorage("cookie_consent", cookieConsent)
    }, [cookieConsent]);
    return (
        <div className="cookie-background" style={{visibility: `${cookieConsent != null ? "hidden" : "visible"}`}}>
            <div className='cookie-banner'> {/* https://gaudion.dev/blog/setup-google-analytics-with-gdpr-compliant-cookie-consent-in-nextjs13 */}
                <Image src="/img/cookie.png" alt="Cookie" width={200} height={200} />
 
     <div>
          <div style={{width: "300px"}}>
             <h3>We use <span style={{fontWeight: '700', textDecoration: 'underline'}}>cookies</span></h3> {/* TODO: link to cookie policy */}
                        <p>We use cookies on our site to ensure that we give you the best experience on our website.</p>
                        <p><Link href="/app">Click here to learn more</Link></p>
                    </div>
                    
                    <div className="options" >
                        <button className='decline-button' onClick={() => setCookieConsent(false)}>Decline</button>
                        <button className='allow-button' onClick={() => setCookieConsent(true)}>Allow Cookies</button>
                    </div>   
                </div>
            </div>
        </div>
)}```
clever domeBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the provided code, your CookieBanner component is using local storage to store the user's consent to use cookies. When the component is mounted, it checks local storage for a value with the key cookie_consent. If a value is found, it is used to set the initial state of cookieConsent. If no value is found, cookieConsent is set to null.

The component then renders a banner asking the user for their consent to use cookies. The visibility of this banner is controlled by the cookieConsent state variable. If cookieConsent is null, the banner is visible. If cookieConsent is not null, the banner is hidden.

The banner includes two buttons, "Decline" and "Allow Cookies". When the user clicks "Decline", cookieConsent is set to false, and when the user clicks "Allow Cookies", cookieConsent is set to true.

Whenever cookieConsent changes, a side effect is triggered that updates the analytics_storage consent configuration for Google Analytics and stores the new cookieConsent value in local storage.

This component seems to be correctly implemented and should work as expected. If you're experiencing issues with it, the problem might be elsewhere in your code. Without more information, it's hard to provide a more specific solution.

If you're still having trouble, you might find it helpful to look at the Next.js documentation (https://nextjs.org/docs) for more information on how to use Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: