Nuxt: window is not defined

[larrasu]

I followed the documentation to a T and got the error window is not defined when I try to add the <Analytics/> on the app.vue.

[feugy]

Hello @larrasu, thanks for the bug report.

Could you share a reproduction please?
We have a working example for Nuxt, and one for vue, so I'll need your help to find out what's wrong.

[Viserion77]

Same here!
I have a sample of the bug in this branch:
feat-add-@vercel/analytics

to run the project and see the error just install the dependencies and run npx nuxt dev

[Viserion77]

Trying to trace the origin of the error...

I believe everything starts here:

analytics/packages/web/src/nuxt/index.ts

Lines 2 to 5 in 68d0d13

	import { createComponent } from '../vue/create-component';
	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- vue's defineComponent return type is any
	export const Analytics = createComponent('nuxt');

For Nuxt, the createComponent from Vue is being used. In turn, inside the setup function, there's a validation on the window prop, which causes the error to occur:

analytics/packages/web/src/vue/create-component.ts

Line 22 in 68d0d13

if (route && window) {

I'm studying SSR in Nuxt, and I noticed that window only exists after Vue's mounted lifecycle hook...

This even makes me question whether analytics works in this kind of architecture, since everything fails during the injection in this validation:

analytics/packages/web/src/generic.ts

Line 45 in 68d0d13

if (!isBrowser()) return;

[feugy]

Hey folks!
I'm able to reproduce this. Very annoyingly, this does not happen on the example app, possibly because of intra-monorepo dependencies.

@Viserion77 Analytics should only happen in client side, when a user actually visit your page. So it's expected that we skip everything when (pre)rendering the page on server side.

[feugy]

@larrasu, @Viserion77 thanks again for the bug report. Version 1.4.1 is out.

I'll close this bug, please re-open it if the fix isn't working as expected !