Setting Up Vercel Audiences - TypeError: Cannot read properties of undefined (reading ‘Analytics’)

The Context

Trying to set-up the Vercel Audiences feature see how many people are viewing my NextJS 13 website!

The Problem

I followed the Quickstart Guide, which has 3 steps:
  1. Enable the Audiences feature in the Vercel dashboard.
  1. Install the node module with yarn add @vercel/analytics.
  1. Render the <Analytics /> component inside app/layout.tsx within the <body> tag.
After that, you should be able to build an deploy, however, when building, I ran into the following error when generating every page:
TypeError: Cannot read properties of undefined (reading 'Analytics')

The Solution

I googled the issue, but didn’t find any similar issues, which was surprising given that Analytics is supported by Vercel and must be widely-used, so others must have run into this issue before me.
I created a minimal reproducible example of the problem - pnpm create next-app which creates a NextJS 13 app. I then followed the steps above to install the analytics library, and ran a build.
The build failed with the following error:
TypeError: (0 , o.useEffect) is not a function
Which was confusing - it looks like react isn’t working or doesn’t exist. I checked my package.json and saw that I had the following line in it:
"react": "link:@vercel/analytics/react",
Which looks really strange to me! After a quick google of this, it looks like this syntax is creating a symlink to a local file for the "react" package - it turns out I had mistakenly typed pnpm i @vercel/analytics/react instead of pnpm i @vercel/analytics! I corrected my mistake and tried again.
The build succeeded, which gave me a number of hypotheses to test.
I copied over the files of my other project so that the directory structure was identical - i.e at this point the project was the same.
I ran another build but this time ran into some typing errors which I quickly fixed using any type for now - re-running, the build succeeded!
It turns out the type errors were due to the fact that when I created my main project the latest version of NextJS was 13.0.0 whereas the current version is 13.2.4 which had some changes to typing on the page level props.
I now had two hypotheses for differences between my main project and the minimal one:
  1. Different versions of packages (in particular next, react, and react-dom.
  1. Different package manager (pnpm vs yarn).
I had a smell that the first was the reason, so I upgraded my NextJS version in my main project and fixed the typing issues and now my build succeeds!
It turns out that NextJS 13.0.0 doesn’t work with Vercel Audiences!
After upgrading, my NextJS version and re-deploying, Audiences works for me!
I posted an issue on the GitHub repo!