Debugging client side exceptions on Vercel

next.config.js

@@ -10,9 +10,10 @@ require('./env');
 const { REWRITES } = require('./rewrites');
 
 const nextConfig = {
+  swcMinify: false, // Disable SWC minification
+  productionBrowserSourceMaps: true,
   eslint: { ignoreDuringBuilds: true },
   useFileSystemPublicRoutes: true,
-  productionBrowserSourceMaps: true,
   typescript: {
     ignoreBuildErrors: true,
   },

package.json

@@ -148,7 +148,7 @@
     "@radix-ui/react-focus-scope": "^1.0.4"
   },
   "scripts": {
-    "build": "npm-run-all build:updates build:next build:server",
+    "build": "next build",
     "build:e2e": "cross-env NODE_ENV=development OC_ENV=e2e npm run build",
     "build:clean": "shx rm -rf dist .next",
     "build:components": "npm run publish-components -- --build-only",
@@ -163,7 +163,7 @@
     "depcheck": "npx @opencollective/depcheck",
     "deploy:production": "cross-env ./scripts/pre-deploy.sh production && git push production main",
     "deploy:staging": "cross-env ./scripts/pre-deploy.sh staging && git push -f staging main",
-    "dev": "node server",
+    "dev": "next dev",
     "docs:generate:contribution-flow": "tsx ./scripts/docs/contribution-flow.js",
     "git:clean": "cross-env ./scripts/git_clean.sh",
     "graphql:codegen": "graphql-codegen --config scripts/config/graphql-codegen.ts",

pages/_app.js

@@ -42,7 +42,6 @@ import memoizeOne from 'memoize-one';
 
 import { APOLLO_STATE_PROP_NAME, initClient } from '../lib/apollo-client';
 import { getTokenFromCookie } from '../lib/auth';
-import { getGoogleMapsScriptUrl, loadGoogleMaps } from '../lib/google-maps';
 import { loggedInUserQuery } from '../lib/graphql/v1/queries';
 import LoggedInUser from '../lib/LoggedInUser';
 import { withTwoFactorAuthentication } from '../lib/two-factor-authentication/TwoFactorAuthenticationContext';
@@ -81,27 +80,27 @@ class OpenCollectiveFrontendApp extends App {
       ctx.req.apolloClient = apolloClient;
     }
 
-    const props = { pageProps: { skipDataFromTree: true }, scripts: {}, ...getIntlProps(ctx) };
+    const props = { pageProps: { skipDataFromTree: true }, ...getIntlProps(ctx) };
 
     try {
       if (Component.getInitialProps) {
         props.pageProps = await Component.getInitialProps({ ...ctx });
       }
 
-      if (props.pageProps.scripts) {
-        if (props.pageProps.scripts.googleMaps) {
-          if (ctx.req) {
-            props.scripts['google-maps'] = getGoogleMapsScriptUrl();
-          } else {
-            try {
-              await loadGoogleMaps();
-            } catch (e) {
-              // eslint-disable-next-line no-console
-              console.error(e);
-            }
-          }
-        }
-      }
+      // if (props.pageProps.scripts) {
+      //   if (props.pageProps.scripts.googleMaps) {
+      //     if (ctx.req) {
+      //       props.scripts['google-maps'] = getGoogleMapsScriptUrl();
+      //     } else {
+      //       try {
+      //         await loadGoogleMaps();
+      //       } catch (e) {
+      //         // eslint-disable-next-line no-console
+      //         console.error(e);
+      //       }
+      //     }
+      //   }
+      // }
     } catch (error) {
       return { ...props, hasError: true, errorEventId: sentryLib.captureException(error, ctx) };
     }
@@ -167,7 +166,7 @@ class OpenCollectiveFrontendApp extends App {
   });
 
   render() {
-    const { Component, pageProps, scripts, locale, LoggedInUserData } = this.props;
+    const { Component, pageProps, locale, LoggedInUserData } = this.props;
 
     if (
       typeof window !== 'undefined' &&
@@ -177,7 +176,6 @@ class OpenCollectiveFrontendApp extends App {
       // eslint-disable-next-line no-console
       console.log('pageProps apollo cache', pageProps?.[APOLLO_STATE_PROP_NAME]);
     }
-
     return (
       <Fragment>
         <ApolloProvider
@@ -209,9 +207,6 @@ class OpenCollectiveFrontendApp extends App {
           </ThemeProvider>
         </ApolloProvider>
         <DefaultPaletteStyle palette={defaultColors.primary} />
-        {Object.keys(scripts).map(key => (
-          <script key={key} type="text/javascript" src={scripts[key]} />
-        ))}
       </Fragment>
     );
   }

pages/create-collective.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
@@ -10,7 +10,8 @@
 import ErrorPage from '../components/ErrorPage';
 import Page from '../components/Page';
 import { withUser } from '../components/UserProvider';
-
+import { getGoogleMapsScriptUrl } from '../lib/google-maps';
+import Script from 'next/script';
 const createCollectiveHostQuery = gql`
   query CreateCollectiveHost($slug: String!) {
     host(slug: $slug) {
@@ -53,15 +54,23 @@
   return (
     <Page showFooter={Boolean(LoggedInUser)}>
       <CreateCollective host={data && data.host} />
+      <Script
+        src={getGoogleMapsScriptUrl()}
+        strategy="lazyOnload" // Loads the script lazily on client-side
+        onLoad={() => {
+          console.log('Google Maps script loaded successfully');
+        }}
+      />
     </Page>
   );
 };
 
-CreateCollectivePage.getInitialProps = () => {
-  return {
-    scripts: { googleMaps: true }, // To enable location autocomplete
-  };
-};
+// CreateCollectivePage.getInitialProps = () => {
+//   const googleMapsUrl = getGoogleMapsScriptUrl();
+//   return {
+//     scripts: { googleMaps: true }, // To enable location autocomplete
+//   };
+// };
 
 CreateCollectivePage.propTypes = {
   loadingLoggedInUser: PropTypes.bool.isRequired,

pages/dashboard.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
 import { clsx } from 'clsx';
 import { useRouter } from 'next/router';
@@ -34,6 +34,8 @@
 import Page from '../components/Page';
 import SignInOrJoinFree from '../components/SignInOrJoinFree';
 import { TwoFactorAuthRequiredMessage } from '../components/TwoFactorAuthRequiredMessage';
+import Script from 'next/script';
+import { getGoogleMapsScriptUrl } from '../lib/google-maps';
 
 const messages = defineMessages({
   collectiveIsArchived: {
@@ -293,15 +295,22 @@
         </Page>
         <Footer />
       </div>
+      <Script
+        src={getGoogleMapsScriptUrl()}
+        strategy="lazyOnload" // Loads the script lazily on client-side
+        onLoad={() => {
+          console.log('Google Maps script loaded successfully');
+        }}
+      />
     </DashboardContext.Provider>
   );
 };
 
-DashboardPage.getInitialProps = () => {
-  return {
-    scripts: { googleMaps: true }, // TODO: This should be enabled only for events
-  };
-};
+// DashboardPage.getInitialProps = () => {
+//   return {
+//     scripts: { googleMaps: true }, // TODO: This should be enabled only for events
+//   };
+// };
 
 // next.js export
 // ts-unused-exports:disable-next-line