fix: next/jest does not support import.meta (#162)

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/analytics",
-  "version": "1.5.0-canary.2",
+  "version": "1.5.0-canary.3",
   "description": "Gain real-time traffic insights with Vercel Web Analytics",
   "keywords": [
     "analytics",

packages/web/src/astro/index.astro

@@ -15,6 +15,19 @@ const paramsStr = JSON.stringify(Astro.params);
 <script>
   import { inject, pageview, computeRoute } from '../index.mjs';
 
+  function getBasePath(): string | undefined {
+    // !! important !!
+    // do not access env variables using import.meta.env[varname]
+    // some bundles won't replace the value at build time.
+    try {
+      return import.meta.env.PUBLIC_VERCEL_OBSERVABILITY_BASEPATH as
+        | string
+        | undefined;
+    } catch {
+      // do nothing
+    }
+  }
+
   customElements.define(
     'vercel-analytics',
     class VercelAnalytics extends HTMLElement {
@@ -27,6 +40,7 @@ const paramsStr = JSON.stringify(Astro.params);
             ...props,
             disableAutoTrack: true,
             framework: 'astro',
+            basePath: getBasePath(),
             beforeSend: window.webAnalyticsBeforeSend,
           });
           const path = this.dataset.pathname;

packages/web/src/generic.ts

@@ -14,7 +14,6 @@ import {
   isDevelopment,
   isProduction,
   computeRoute,
-  getBasePath,
   getScriptSrc,
 } from './utils';
 
@@ -34,6 +33,7 @@ function inject(
   props: AnalyticsProps & {
     framework?: string;
     disableAutoTrack?: boolean;
+    basePath?: string;
   } = {
     debug: true,
   }
@@ -62,11 +62,10 @@ function inject(
   if (props.disableAutoTrack) {
     script.dataset.disableAutoTrack = '1';
   }
-  const basePath = getBasePath();
   if (props.endpoint) {
     script.dataset.endpoint = props.endpoint;
-  } else if (basePath) {
-    script.dataset.endpoint = `${basePath}/insights`;
+  } else if (props.basePath) {
+    script.dataset.endpoint = `${props.basePath}/insights`;
   }
   if (props.dsn) {
     script.dataset.dsn = props.dsn;

packages/web/src/nextjs/index.tsx

@@ -2,14 +2,20 @@
 import React, { Suspense, type ReactNode } from 'react';
 import { Analytics as AnalyticsScript } from '../react';
 import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 type Props = Omit<AnalyticsProps, 'route' | 'disableAutoTrack'>;
 
 function AnalyticsComponent(props: Props): ReactNode {
   const { route, path } = useRoute();
   return (
-    <AnalyticsScript path={path} route={route} {...props} framework="next" />
+    <AnalyticsScript
+      path={path}
+      route={route}
+      {...props}
+      basePath={getBasePath()}
+      framework="next"
+    />
   );
 }
 

packages/web/src/nextjs/utils.test.ts

@@ -0,0 +1,30 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns null without process', () => {
+    // @ts-expect-error -- yes, we want to completely drop process for this test!!
+    global.process = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns null without process.env', () => {
+    // @ts-expect-error -- yes, we want to completely drop process.env for this test!!
+    process.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns basepath set for Nextjs', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+});

packages/web/src/nextjs/utils.ts

@@ -21,3 +21,14 @@ export const useRoute = (): {
     : Object.fromEntries(searchParams.entries());
   return { route: computeRoute(path, finalParams), path };
 };
+
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using process.env[varname]
+  // some bundles won't replace the value at build time.
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- we can't use optionnal here, it'll break if process does not exist.
+  if (typeof process === 'undefined' || typeof process.env === 'undefined') {
+    return undefined;
+  }
+  return process.env.NEXT_PUBLIC_VERCEL_OBSERVABILITY_BASEPATH;
+}

packages/web/src/react.test.tsx → packages/web/src/react/index.test.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { afterEach, beforeEach, describe, it, expect } from 'vitest';
 import { cleanup, render } from '@testing-library/react';
-import { Analytics, track } from './react';
-import type { AllowedPropertyValues, AnalyticsProps, Mode } from './types';
+import type { AllowedPropertyValues, AnalyticsProps, Mode } from '../types';
+import { Analytics, track } from './index';
 
 describe('<Analytics />', () => {
   afterEach(() => {

packages/web/src/react.tsx → packages/web/src/react/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { useEffect } from 'react';
-import { inject, track, pageview } from './generic';
-import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from './types';
+import { inject, track, pageview } from '../generic';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
+import { getBasePath } from './utils';
 
 /**
  * Injects the Vercel Web Analytics script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/concepts/analytics/package).
@@ -31,6 +32,7 @@ function Analytics(
     framework?: string;
     route?: string | null;
     path?: string | null;
+    basePath?: string;
   }
 ): null {
   useEffect(() => {
@@ -43,6 +45,7 @@ function Analytics(
   useEffect(() => {
     inject({
       framework: props.framework || 'react',
+      basePath: props.basePath ?? getBasePath(),
       ...(props.route !== undefined && { disableAutoTrack: true }),
       ...props,
     });

packages/web/src/react/utils.test.ts

@@ -0,0 +1,30 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns null without process', () => {
+    // @ts-expect-error -- yes, we want to completely drop process for this test!!
+    global.process = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns null without process.env', () => {
+    // @ts-expect-error -- yes, we want to completely drop process.env for this test!!
+    process.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+
+  it('returns basepath set for CRA', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+});

packages/web/src/react/utils.ts

@@ -0,0 +1,10 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using process.env[varname]
+  // some bundles won't replace the value at build time.
+  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain -- we can't use optionnal here, it'll break if process does not exist.
+  if (typeof process === 'undefined' || typeof process.env === 'undefined') {
+    return undefined;
+  }
+  return process.env.REACT_APP_VERCEL_OBSERVABILITY_BASEPATH;
+}

packages/web/src/remix/index.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { Analytics as AnalyticsScript } from '../react';
 import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 export function Analytics(props: Omit<AnalyticsProps, 'route'>): JSX.Element {
-  return <AnalyticsScript {...useRoute()} {...props} framework="remix" />;
+  return (
+    <AnalyticsScript
+      {...useRoute()}
+      {...props}
+      basePath={getBasePath()}
+      framework="remix"
+    />
+  );
 }
 export type { AnalyticsProps, BeforeSend, BeforeSendEvent };

packages/web/src/remix/utils.test.ts

@@ -0,0 +1,24 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns basepath set for Remix', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+
+  it('returns null without import.meta', () => {
+    // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
+    import.meta.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+});

packages/web/src/remix/utils.ts

@@ -6,3 +6,16 @@ export const useRoute = (): { route: string | null; path: string } => {
   const { pathname: path } = useLocation();
   return { route: computeRoute(path, params as never), path };
 };
+
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}

packages/web/src/sveltekit/index.ts

@@ -1,5 +1,6 @@
 import { inject, pageview, track } from '../generic';
 import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
+import { getBasePath } from './utils';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 import type {} from '@sveltejs/kit';
@@ -8,6 +9,7 @@ function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
   if (browser) {
     inject({
       ...props,
+      basePath: getBasePath(),
       disableAutoTrack: true,
       framework: 'sveltekit',
     });

packages/web/src/sveltekit/utils.test.ts

@@ -0,0 +1,24 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { getBasePath } from './utils';
+
+describe('getBasePath()', () => {
+  const processSave = { ...process };
+  const envSave = { ...process.env };
+
+  afterEach(() => {
+    global.process = { ...processSave };
+    process.env = { ...envSave };
+  });
+
+  it('returns basepath set for Sveltekit', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+
+  it('returns null without import.meta', () => {
+    // @ts-expect-error -- yes, we want to completely drop import.meta.env for this test!!
+    import.meta.env = undefined;
+    expect(getBasePath()).toBeUndefined();
+  });
+});

packages/web/src/sveltekit/utils.ts

@@ -0,0 +1,12 @@
+export function getBasePath(): string | undefined {
+  // !! important !!
+  // do not access env variables using import.meta.env[varname]
+  // some bundles won't replace the value at build time.
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}