Npm start works but npm run build fails - header.js error - Gatsby prismic

Hey I used the docs to create navigation:
but I get this error when trying to do npm run build

Building static HTML failed for path "/404/"

See our docs page for more info on this error:

   6 | const Header = ({ isHomepage, navigation }) => {
   7 |   const homepageClass = isHomepage ? "homepage-header" : "";
>  8 |   const topNav =;
     |                             ^
   9 | 
  10 |   return (
  11 |     <header className={`flex justify-between site-header ${homepageClass}`}>

  WebpackError: TypeError: Cannot read property 'data' of undefined
  - Header.js:8 

export const query = graphql`
  fragment HeaderQuery on PrismicNavigation {
    data {
      top_navigation {
        link {
        link_label {

I think it's something in the graphql but not sure what, anyone know?

Hey, @ihaephrati, thanks for reaching out!

A validation to check if the response is null or not is needed before the topNav variable. Like so:

const Header = ({ isHomepage, navigation }) => {
  if (!navigation) return null

  const homepageClass = isHomepage ? 'homepage-header' : ''
  const topNav =

I'll be sure to add this to the guide you are following.

Thanks, it worked!
appreciate it

I have one more question if I may,

I'm trying to create a 3rd level menu, (treeview)

I saw this:

Can I please see an example of how to implement it with Gatsby?
I can see that the example in the nested lists is in Pug is it possible to see somewhere an example of how to do this with Gatsby?

Thanks again!

I was able to create A start like this.
Any tips?

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { RichText } from "prismic-reactjs";

const Sidebar = ({}) => {
  const data = useStaticQuery(graphql`
    query SidebarQuery {
      prismicNewSideb {
        data {
          body {
            items {
              list {
  // console.log(data);
  return (
    <ul className="multi_list">
      {[0] => {
        return (
          multi ${item.list_level}
            {" "}

export default Sidebar;

That's a good approach for creating the menu. I've updated the article you saw before to include a code example in React. Let me know if it's helpful.

I can also recommend you something else for your queries. I see that you're using useStaticQuery for your component. We've discovered this approach isn't a good fit for doing queries inside components, it makes the query unavailable if you're in preview mode as well as other minor disadvantages that we're still investigating.

What I suggest is that you use Fragments instead. That way you can have smaller more segmented fractions of query throughout your project:

This issue has been closed due to inactivity. Flag to reopen.