fix: address Next.js build errors

Author: jbottigliero

package-lock.json

@@ -11,6 +11,7 @@ import { useGlobusAuth } from "@globus/react-auth-context";
 import { flows } from "@globus/sdk";
 import { useEffect, useState } from "react";
 import { useFlowDefinitionDispatch } from "./FlowDefinitionProvider/FlowDefinitionProvider";
+import { FlowDefinition } from "@/pages";
 
 export default function Panel() {
   const auth = useGlobusAuth();
@@ -34,7 +35,7 @@ export default function Panel() {
       const res = await (
         await flows.flows.getAll({
           headers: {
-            Authorization: `Bearer ${token.access_token}`,
+            Authorization: `Bearer ${token?.access_token}`,
           },
         })
       ).json();
@@ -45,6 +46,8 @@ export default function Panel() {
     fetchFlows();
   }, [auth.authorization, auth.isAuthenticated]);
 
+  if (!flowDefinitionDispatch) return;
+
   return (
     <Box h="100%" bg={"gray.100"} w={"280px"}>
       <Accordion defaultIndex={[0]} allowMultiple>
@@ -59,25 +62,31 @@ export default function Panel() {
           </AccordionButton>
           <AccordionPanel m={0} p={0}>
             <Box fontSize="sm">
-              {userFlows.map((flow) => (
-                <Box
-                  key={flow.id}
-                  onClick={() => {
-                    flowDefinitionDispatch({
-                      type: "replace",
-                      payload: flow.definition,
-                    });
-                  }}
-                  p={2}
-                  _hover={{
-                    bg: "gray.600",
-                    cursor: "pointer",
-                    color: "white",
-                  }}
-                >
-                  {flow.title}
-                </Box>
-              ))}
+              {userFlows.map(
+                (flow: {
+                  id: string;
+                  definition: FlowDefinition;
+                  title: string;
+                }) => (
+                  <Box
+                    key={flow.id}
+                    onClick={() => {
+                      flowDefinitionDispatch({
+                        type: "replace",
+                        payload: flow.definition,
+                      });
+                    }}
+                    p={2}
+                    _hover={{
+                      bg: "gray.600",
+                      cursor: "pointer",
+                      color: "white",
+                    }}
+                  >
+                    {flow.title}
+                  </Box>
+                ),
+              )}
             </Box>
           </AccordionPanel>
         </AccordionItem>

src/components/Panel.tsx

@@ -81,32 +81,34 @@ export function ValidateButton() {
      * When Monaco is ready, and we have location errors, we'll add markers to the editor.
      */
     if (monaco && locationErrors) {
-      const markers = locationErrors.map((d) => {
-        const [_definition, _state, stateName] = d.loc;
-        const matches = model.findMatches(
-          `"${stateName}":`,
-          true,
-          true,
-          true,
-          null,
-          true,
-        );
+      const markers = locationErrors.map(
+        (d: { loc: string[]; msg: string }) => {
+          const [_definition, _state, stateName] = d.loc;
+          const matches = model.findMatches(
+            `"${stateName}":`,
+            true,
+            true,
+            true,
+            null,
+            true,
+          );
 
-        const location = matches[0]?.range ?? {
-          startLineNumber: 1,
-          endLineNumber: 1,
-          startColumn: 1,
-          endColumn: 1,
-        };
+          const location = matches[0]?.range ?? {
+            startLineNumber: 1,
+            endLineNumber: 1,
+            startColumn: 1,
+            endColumn: 1,
+          };
 
-        return {
-          ...location,
-          owner: GLOBUS_FLOWS_VALIDATION.OWNER,
-          source: GLOBUS_FLOWS_VALIDATION.SOURCE,
-          message: d.msg,
-          severity: 8,
-        };
-      });
+          return {
+            ...location,
+            owner: GLOBUS_FLOWS_VALIDATION.OWNER,
+            source: GLOBUS_FLOWS_VALIDATION.SOURCE,
+            message: d.msg,
+            severity: 8,
+          };
+        },
+      );
 
       monaco.editor.setModelMarkers(
         model,

src/components/Validate.tsx

@@ -103,7 +103,9 @@ export default function Home() {
    * @todo This will likely need to be removed/changed when the `<Panel>` with
    * user Flow selection is enabled.
    */
-  const storedDef = sessionStorage.getItem(STORED_DEFINITION_KEY);
+  const storedDef =
+    globalThis.sessionStorage &&
+    globalThis.sessionStorage.getItem(STORED_DEFINITION_KEY);
 
   const replaceDefinition = useCallback(
     (def: string | undefined) => {
@@ -123,7 +125,7 @@ export default function Home() {
   useEffect(() => {
     if (storedDef) {
       replaceDefinition(storedDef);
-      sessionStorage.removeItem("definition");
+      globalThis.sessionStorage.removeItem("definition");
     }
   }, [storedDef, replaceDefinition]);