Next.js Discord

Discord Forum

Getting a TypeError: Cannot read properties of null (reading 'addEventListener')

Unanswered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
I am getting the following error when I add the GoogleTagManager component from the @next/third-parties ^14.2.4 library to my root layout.tsx. I am on next v14.1.0. I am passing the tracking code as a env variable to the gtmId prop.

It doesn't affect the production site but does shows the error dialog on localhost on every refresh.

If I can get any suggestions on how to fix this would be greatly appreciated, thanks!

'use client'
import '@/app/globals.css'
import { Toaster } from '@/components/ui/sonner'
import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google'
import { Analytics } from '@vercel/analytics/react'
import { Inter } from 'next/font/google'

const inter = Inter({
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-inter',
})

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode
}>) {

    const gaId = process.env.NEXT_PUBLIC_GA4
    const gtmId = process.env.NEXT_PUBLIC_GTM

    return (
        <html lang='en'>
            <GoogleAnalytics gaId={gaId!} />
            <body className={`${inter.variable} ${process.env.NODE_ENV === 'development' && 'debug-screens'}`}>
                {children}
                <Analytics />
                <Toaster expand={true} richColors />{' '}
            </body>
            <GoogleTagManager gtmId={gtmId!} />
        </html>
    )
}

1 Reply

TomistomaOP
Heres what the console shows