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

apps/remix/package.json

@@ -28,8 +28,5 @@
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"
-  },
-  "engines": {
-    "node": ">=20.0.0"
   }
 }

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "1.2.0-canary.3",
+  "version": "1.2.0-canary.4",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",

packages/web/src/astro/index.astro

@@ -15,6 +15,19 @@ const paramsStr = JSON.stringify(Astro.params);
 <script>
   import { injectSpeedInsights, 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-speed-insights',
     class VercelSpeedInsights extends HTMLElement {
@@ -28,6 +41,7 @@ const paramsStr = JSON.stringify(Astro.params);
             route,
             ...props,
             framework: 'astro',
+            basePath: getBasePath(),
             beforeSend: window.speedInsightsBeforeSend,
           });
         } catch (err) {

packages/web/src/generic.ts

@@ -1,13 +1,7 @@
 import { name as packageName, version } from '../package.json';
 import { initQueue } from './queue';
 import type { SpeedInsightsProps } from './types';
-import {
-  computeRoute,
-  getBasePath,
-  getScriptSrc,
-  isBrowser,
-  isDevelopment,
-} from './utils';
+import { computeRoute, getScriptSrc, isBrowser, isDevelopment } from './utils';
 
 /**
  * Injects the Vercel Speed Insights script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/speed-insights).
@@ -21,6 +15,7 @@ import {
 function injectSpeedInsights(
   props: SpeedInsightsProps & {
     framework?: string;
+    basePath?: string;
   } = {},
 ): {
   setRoute: (route: string | null) => void;
@@ -51,11 +46,10 @@ function injectSpeedInsights(
   if (props.route) {
     script.dataset.route = props.route;
   }
-  const basePath = getBasePath();
   if (props.endpoint) {
     script.dataset.endpoint = props.endpoint;
-  } else if (basePath) {
-    script.dataset.endpoint = `${basePath}/speed-insights/vitals`;
+  } else if (props.basePath) {
+    script.dataset.endpoint = `${props.basePath}/speed-insights/vitals`;
   }
   if (props.dsn) {
     script.dataset.dsn = props.dsn;

packages/web/src/nextjs/index.tsx

@@ -3,14 +3,21 @@
 import React, { Suspense } from 'react';
 import { SpeedInsights as SpeedInsightsScript } from '../react';
 import type { SpeedInsightsProps } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 type Props = Omit<SpeedInsightsProps, 'route'>;
 
 function SpeedInsightsComponent(props: Props): React.ReactElement {
   const route = useRoute();
 
-  return <SpeedInsightsScript route={route} {...props} framework="next" />;
+  return (
+    <SpeedInsightsScript
+      route={route}
+      {...props}
+      framework="next"
+      basePath={getBasePath()}
+    />
+  );
 }
 
 export function SpeedInsights(props: Props): null {

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

@@ -17,3 +17,14 @@ export const useRoute = (): string | null => {
     : Object.fromEntries(searchParams.entries());
   return computeRoute(path, finalParams);
 };
+
+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/index.tsx

@@ -3,10 +3,12 @@
 import { useEffect, useRef } from 'react';
 import type { SpeedInsightsProps } from '../types';
 import { computeRoute, injectSpeedInsights } from '../generic';
+import { getBasePath } from './utils';
 
 export function SpeedInsights(
   props: SpeedInsightsProps & {
     framework?: string;
+    basePath?: string;
   },
 ): JSX.Element | null {
   useEffect(() => {
@@ -19,7 +21,8 @@ export function SpeedInsights(
   useEffect(() => {
     if (!setScriptRoute.current) {
       const script = injectSpeedInsights({
-        framework: props.framework || 'react',
+        framework: props.framework ?? 'react',
+        basePath: props.basePath ?? getBasePath(),
         ...props,
       });
       if (script) {

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,7 +1,7 @@
 import React from 'react';
 import { SpeedInsights as SpeedInsightsScript } from '../react';
 import type { SpeedInsightsProps } from '../types';
-import { useRoute } from './utils';
+import { getBasePath, useRoute } from './utils';
 
 export function SpeedInsights(
   props: Omit<SpeedInsightsProps, 'route'>,
@@ -10,9 +10,10 @@ export function SpeedInsights(
 
   return (
     <SpeedInsightsScript
-      {...(route && { route })}
+      route={route}
       {...props}
       framework="remix"
+      basePath={getBasePath()}
     />
   );
 }

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

@@ -7,3 +7,16 @@ export const useRoute = (): string | null => {
 
   return computeRoute(location.pathname, params as never);
 };
+
+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

@@ -3,6 +3,7 @@ import {
   injectSpeedInsights as genericInject,
   type SpeedInsightsProps,
 } from '../generic';
+import { getBasePath } from './utils';
 import { page } from '$app/stores';
 import { browser } from '$app/environment';
 import type {} from '@sveltejs/kit'; // don't remove, ensures ambient types for $app/* are loaded
@@ -16,6 +17,7 @@ export function injectSpeedInsights(
       route: get(page).route?.id,
       ...props,
       framework: 'sveltekit',
+      basePath: getBasePath(),
     });
 
     if (speedInsights) {

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
+  }
+}