fix(monitoring): prevent use client directive from getting removed

aidenybai · Dec 13, 2024 · c5ab275 · c5ab275
1 parent 14549b2
commit c5ab275
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 12 deletions.
diff --git a/packages/scan/package.json b/packages/scan/package.json
@@ -23,7 +23,6 @@
     "email": "[email protected]",
     "url": "https://million.dev"
   },
-  "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",
     "./monitoring": {

diff --git a/packages/scan/src/core/monitor/constants.ts b/packages/scan/src/core/monitor/constants.ts
@@ -26,7 +26,7 @@ export let isRSC = !React.useRef;
 export let isSSR = typeof window === 'undefined' || isRSC;
 
 export let isTest =
-  (window &&
+  (typeof window !== 'undefined' &&
     /**
      * @see https://docs.cypress.io/faq/questions/using-cypress-faq#Is-there-any-way-to-detect-if-my-app-is-running-under-Cypress
      */

diff --git a/packages/scan/src/core/monitor/index.ts b/packages/scan/src/core/monitor/index.ts
@@ -67,7 +67,7 @@ export const Monitoring = ({
   // When using Monitoring without framework, we need to compute the route from the path and params
   if (!route && path && params) {
     Store.monitor.value.route = computeRoute(path, params);
-  } else {
+  } else if (typeof window !== 'undefined') {
     Store.monitor.value.route =
       route ?? path ?? new URL(window.location.toString()).pathname; // this is inaccurate on vanilla react if the path is not provided but used for session route
   }

diff --git a/packages/scan/src/core/monitor/params/next.ts b/packages/scan/src/core/monitor/params/next.ts
@@ -1,13 +1,11 @@
-'use client';
-
-// adapted from vercel analytics <remember to put link here>
+// adapted from: https://github.com/vercel/analytics
 import { useParams, usePathname, useSearchParams } from 'next/navigation.js';
-// import React from 'react';
 import { createElement, Suspense } from 'react';
-import { Monitoring as BaseMonitoring, type MonitoringWithoutRouteProps } from '..';
+import {
+  Monitoring as BaseMonitoring,
+  type MonitoringWithoutRouteProps,
+} from '..';
 import { computeRoute } from './utils';
-// import { computeRoute } from '../utils';
-// does this work in pages and app router? Idk
 const useRoute = (): {
   route: string | null;
   path: string;

diff --git a/packages/scan/src/monitoring/next.ts b/packages/scan/src/monitoring/next.ts
diff --git a/packages/scan/tsup.config.ts b/packages/scan/tsup.config.ts
@@ -98,7 +98,9 @@ export default defineConfig([
     format: ['cjs', 'esm'],
     target: 'esnext',
     platform: 'browser',
-    treeshake: true,
+    // FIXME: tree shaking removes use client directive
+    // Info: vercel analytics does the same thing- https://github.com/vercel/analytics/blob/main/packages/web/tsup.config.js
+    treeshake: false,
     dts: true,
     async onSuccess() {
       await Promise.all([