Warning: Encountered two children with the same key when enabled alongside Vercel Analytics

[jinsley8]

I just installed this package in my project, however, if Vercel Analytics is also installed I get the following browser console warning:

Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

If I add a key to <GoogleAnalytics /> the warning goes away. Not sure if it was something you needed to be aware of.

import { GoogleAnalytics, event } from 'nextjs-google-analytics';
import { Analytics } from '@vercel/analytics/react';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <>
             <GoogleAnalytics
                trackPageViews={{ ignoreHashChange: true }}
               key={0}
             />
             <Component {...pageProps} key={router.asPath} />
             <Analytics />
    );
}

[MauricioRobayo]

Hello @jinsley8 !

I was not aware of this, thanks for bringing it up.

Do you think adding a note on the README.md would be useful?

[jinsley8]

I haven't checked yet if it works properly on a production site but the warning goes away.

I don't see any reason why it wouldn't work so updating the README would be fine.

[wiah]

I encountered a similar problem where GA worked fine in local development, but when pushed to production on Vercel, no data was ever sent to Google Analytics.

I removed the @vercel/analytics dependency, which solved my problem. This works for me as a temporary solution, but ideally I would like to use both analytics tools.

[MauricioRobayo]

I encountered a similar problem where GA worked fine in local development, but when pushed to production on Vercel, no data was ever sent to Google Analytics.

I removed the @vercel/analytics dependency, which solved my problem. This works for me as a temporary solution, but ideally I would like to use both analytics tools.

I don't see any reason for google analytics to fail while vercel analytics is also active, but will do some research to see if I can find something, thanks for bringing this up @wiah .

Just in case: "I encountered a similar problem where GA worked fine in local development, but when pushed to production on Vercel, no data was ever sent to Google Analytics.", is the env variable properly set in production? What's your setup?

[wiah]

Just in case: "I encountered a similar problem where GA worked fine in local development, but when pushed to production on Vercel, no data was ever sent to Google Analytics.", is the env variable properly set in production? What's your setup?

As the readme dictates, I set NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX" in my .env.local file in local development, and have an env variable in Vercel with the same name and value.

When I incorporated the GA4 script in the head by myself instead of using this package, there was no problem. But when I installed this package and pushed to prod, no data was captured by GA4 in the dashboard.