Gatsby Build stucks on task "Building static HTML for pages"

Question

I have the problem, that every time I run my "gastby build" command (I ran before "gastby clean"), that it stucks on the task "Building static HTML for pages" with 0 percent and does not finish the build.

My tech stack is:

• "gatsby": "^4.18.0"
• "react": "^18.1.0"
• "react-dom": "^18.1.0"
• "theme-ui": "^0.3.4"
• "@emotion/core": "^10.3.1",
• "@emotion/react": "^11.9.3",

I identified that the problem is caused by the following code in my Header.Menu.jsx:

const NaviList = ({ navKey, wrapperProps, items, items2, ...props }) =>
  items ? (
    <Flex {...wrapperProps}>
      {items.map((menuItem, index) => (
        <>
          <NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
          <Box sx={styles.secondUl}>
            {items2.map((menuItem2, index2) => (
              <NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
            ))}
          </Box>
        </>
      ))}
    </Flex>
  ) : null

When I uncomment the second JavaScript map items2.map() then my gastby build runs without problems and finishes the build compeletly without getting stucked.

const NaviList = ({ navKey, wrapperProps, items, items2, ...props }) =>
  items ? (
    <Flex {...wrapperProps}>
      {items.map((menuItem, index) => (
        <>
          <NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
          <Box sx={styles.secondUl}>
            {/*{items2.map((menuItem2, index2) => (*/}
            {/*  <NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />*/}
            {/*))}*/}
          </Box>
        </>
      ))}
    </Flex>
  ) : null

But how can I achive that my JSX component can use these nested JavaScript Maps items.map() and items2.map() function?

Answer 1

It seems that items2 may arrive null or undefined when compiling at that point of the code. Try adding an optional chaining or a condition like:

{items2 && items2.map((menuItem2, index2) => (
  <NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
))}

You can also avoid this condition by specifying default values in your component in case they arrive with a falsy value:

const NaviList = ({ navKey, wrapperProps, items=[], items2=[], ...props }) =>
  items ? (
    <Flex {...wrapperProps}>
      {items.map((menuItem, index) => (
        <>
          <NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
          <Box sx={styles.secondUl}>
            {items2 && items2.map((menuItem2, index2) => (
              <NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
            ))}
          </Box>
        </>
      ))}
    </Flex>
  ) : null