Env file missing error

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run watch
+
+

src/components/GoogleAnalytics.test.tsx

@@ -122,7 +122,39 @@ describe("GoogleAnalytics", () => {
     });
     expect(Router.events.on).toBeCalled();
   });
-
+  it('should not throw an error when no process.env exists', () => {
+    // These tests run in node however this component will also be rendered on the browser.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    process.env = undefined
+    render(
+      <GoogleAnalytics />
+    );
+    expect(usePageViewsSpy).toBeCalledWith({
+      disabled: true,
+      gaMeasurementId: undefined,
+      ignoreHashChange: false,
+    });
+    expect(Router.events.on).not.toBeCalled();
+  })
+  it('should work with the prop when no process.env exists', () => {
+    // These tests run in node however this component will also be rendered on the browser.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    process.env = undefined
+    render(
+      <GoogleAnalytics
+        trackPageViews={{ ignoreHashChange: false }}
+        gaMeasurementId="5678"
+      />
+    );
+    expect(usePageViewsSpy).toBeCalledWith({
+      disabled: false,
+      gaMeasurementId: "5678",
+      ignoreHashChange: false,
+    });
+    expect(Router.events.on).toBeCalled();
+  })
   describe("debugMode", () => {
     it("should not have debug_mode when the debugMode prop is not set", () => {
       render(<GoogleAnalytics gaMeasurementId="1234" />);

src/components/GoogleAnalytics.tsx

@@ -21,6 +21,21 @@ type WithIgnoreHashChange = GoogleAnalyticsProps & {
   };
 };
 
+const getGaMeasurementId = (gaMeasurementIdProp?: string) => {
+  let gaMeasurementId: string | undefined
+  try {
+    // process.env could be undefined if no env. file or next.config is not using env
+    gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
+  } catch (e) {
+    // nothing to do
+  }
+  // To keep feature parity, allow the env var to override the prop
+  if (!gaMeasurementId) {
+    gaMeasurementId = gaMeasurementIdProp
+  }
+  return gaMeasurementId
+}
+
 export function GoogleAnalytics({
   debugMode = false,
   gaMeasurementId,
@@ -30,8 +45,7 @@ export function GoogleAnalytics({
   trackPageViews,
   nonce,
 }: WithPageView | WithIgnoreHashChange): JSX.Element | null {
-  const _gaMeasurementId =
-    process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? gaMeasurementId;
+  const _gaMeasurementId = getGaMeasurementId(gaMeasurementId)
 
   usePageViews({
     gaMeasurementId: _gaMeasurementId,
@@ -54,13 +68,12 @@ export function GoogleAnalytics({
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            ${
-              defaultConsent === "denied" ?
-              `gtag('consent', 'default', {
+            ${defaultConsent === "denied" ?
+            `gtag('consent', 'default', {
               'ad_storage': 'denied',
               'analytics_storage': 'denied'
             });` : ``
-            }
+          }
             gtag('config', '${_gaMeasurementId}', {
               page_path: window.location.pathname,
               ${debugMode ? `debug_mode: ${debugMode},` : ""}