WebpackError: Cannot read property 'node' of undefined

Question

I am working with Gatsby.js trying to make a production build with gatsby build.

When getting to the building of the HTML pages I get this error in the terminal.

error Building static HTML for pages failed


  58 |         ? this.props.data.allAuthorsJson.edges
  59 |         : [];
> 60 |     const getAuthor = () => authorsEdges[0].node;
     |                                             ^
  61 | 
  62 |     return (
  63 |       <Drawer className="author-template" isOpen={this.state.menuOpen}>


  WebpackError: Cannot read property 'node' of undefined

  - author.jsx:60 getAuthor
    src/templates/author.jsx:60:45

  - author.jsx:78 AuthorTemplate.render
    src/templates/author.jsx:78:34

  - ReactCompositeComponent.js:796 ReactCompositeComponentWrapper._renderValidatedComponentWithoutO    wnerOrContext
    ~/react-dom/lib/ReactCompositeComponent.js:796:1

  - ReactCompositeComponent.js:819 ReactCompositeComponentWrapper._renderValidatedComponent
    ~/react-dom/lib/ReactCompositeComponent.js:819:1

  - ReactCompositeComponent.js:359 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:359:1

  - ReactCompositeComponent.js:255 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:255:1

  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

  - ReactMultiChild.js:234 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:234:1

  - ReactDOMComponent.js:657 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:657:1

  - ReactDOMComponent.js:524 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:524:1

This is the page in question:

import React from 'react';
import Helmet from 'react-helmet';
import PostListing from '../components/PostListing/PostListing';
import config from '../../data/SiteConfig';
import Drawer from '../layouts/Drawer/Drawer';
import Navigation from '../components/Navigation/Navigation';
import SiteWrapper from '../layouts/SiteWrapper/SiteWrapper';
import MainHeader from '../layouts/MainHeader/MainHeader';
import MainNav from '../layouts/MainNav/MainNav';
import BlogLogo from '../components/BlogLogo/BlogLogo';
import MenuButton from '../components/MenuButton/MenuButton';
import AuthorImage from '../components/AuthorImage/AuthorImage';
import AuthorProfile from '../layouts/AuthorProfile/AuthorProfile';
import AuthorName from '../components/AuthorName/AuthorName';
import AuthorBio from '../components/AuthorBio/AuthorBio';
import AuthorMeta from '../layouts/AuthorMeta/AuthorMeta';
import AuthorLocation from '../components/AuthorLocation/AuthorLocation';
import AuthorWebsite from '../components/AuthorWebsite/AuthorWebsite';
import AuthorStats from '../components/AuthorStats/AuthorStats';
import Footer from '../components/Footer/Footer';
import SocialMediaIcons from '../components/SocialMediaIcons/SocialMediaIcons';

class AuthorTemplate extends React.Component {
  state = {
    menuOpen: false,
  };

  handleOnClick = evt => {
    evt.stopPropagation();
    if (this.state.menuOpen) {
      this.closeMenu();
    } else {
      this.openMenu();
    }
  };

  handleOnClose = evt => {
    evt.stopPropagation();
    this.closeMenu();
  };

  openMenu = () => {
    this.setState({ menuOpen: true });
  };

  closeMenu = () => {
    this.setState({ menuOpen: false });
  };

  render() {
    const { author, cover } = this.props.pathContext;
    const postEdges =
      this.props.data.allMarkdownRemark && this.props.data.allMarkdownRemark.edges
        ? this.props.data.allMarkdownRemark.edges
        : [];
    const authorsEdges =
      this.props.data.allAuthorsJson && this.props.data.allAuthorsJson.edges
        ? this.props.data.allAuthorsJson.edges
        : [];
    const getAuthor = () => authorsEdges[0].node;

    return (
      <Drawer className="author-template" isOpen={this.state.menuOpen}>
        <Helmet title={`Posts by "${author}" | ${config.siteTitle}`} />

        {/* The blog navigation links */}
        <Navigation config={config} onClose={this.handleOnClose} />

        <SiteWrapper>
          <MainHeader className="author-head" cover={cover}>
            <MainNav overlay={cover}>
              <BlogLogo logo={config.siteLogo} title={config.siteTitle} />
              <MenuButton navigation={config.siteNavigation} onClick={this.handleOnClick} />
            </MainNav>
          </MainHeader>

          <AuthorProfile className="inner">
            <AuthorImage author={getAuthor()} />
            <AuthorName name={getAuthor().name} />
            <AuthorBio bio={getAuthor().bio} />
            <AuthorMeta>
              <AuthorLocation location={getAuthor().location} />
              <AuthorWebsite url={getAuthor().url} />
            </AuthorMeta>
            <AuthorStats postEdges={postEdges} />
          </AuthorProfile>

          {/* PostListing component renders all the posts */}
          <PostListing postEdges={postEdges} postAuthors={authorsEdges} />

          {/* Social information here */}
          <SocialMediaIcons urls={getAuthor().socialUrls} />

          {/* The tiny footer at the very bottom */}
          <Footer copyright={config.copyright} promoteGatsby={config.promoteGatsby} />
        </SiteWrapper>
      </Drawer>
    );
  }
}

/* eslint no-undef: "off" */
export const pageQuery = graphql`
  query AuthorPage($author: String) {
    allMarkdownRemark(
      limit: 1000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { author: { eq: $author } } }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          excerpt
          timeToRead
          frontmatter {
            title
            tags
            cover
            date
            author
          }
        }
      }
    }
    allAuthorsJson(filter: { id: { eq: $author } }) {
      edges {
        node {
          id
          name
          image
          url
          bio
          location
          socialUrls
        }
      }
    }
  }
`;

export default AuthorTemplate;

UPDATE March 5th 2018

const { author, cover } = this.props.pathContext;
    const postEdges =
      this.props.data.allMarkdownRemark && this.props.data.allMarkdownRemark.edges
        ? this.props.data.allMarkdownRemark.edges
        : [];
    if (!this.props.data.allAuthorsJson || !this.props.data.allAuthorsJson.edges) return null;

    const authorsEdges = this.props.data.allAuthorsJson.edges;

    const getAuthor = () => authorsEdges[0].node;

Also like Sarasate said below, in your siteConfig.js you should include this:

module.exports = {
  ..... // other config key value
  siteUrl: 'https://www.your-site.com', // Domain of your website without pathPrefix.
  ..... // other config key value      
};

Sarasate · Accepted Answer · 2018-03-05 23:00:03Z

1

For some reason there is no data returned for this.props.data.allAuthorsJson from your graphql query.

If thats the case your ternary operator still returns an empty array. You try to access that in the next line: authorsEdges[0] which will fail as there is no element in the array in that case. If there is no author, you can't render anything.

A simple solution:

if (!this.props.data.allAuthorsJson || 
  !this.props.data.allAuthorsJson.edges) return null //Or any React component

const authorsEdges = this.props.data.allAuthorsJson.edges

const getAuthor = () => authorsEdges[0].node;

answered Mar 5, 2018 at 23:00

Sarasate

264 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Antonio Pavicevac-Ortiz Over a year ago

I updated my code above... Is that correct? I got back error Plugin gatsby-plugin-sitemap returned an error Error: Protocol is required

Sarasate Over a year ago

Yep, at least it handles the case where there is no data, so you won't get an error for this one anymore. The sitemap error is something different, your sitemap urls are missing a http or https in your sitemap config. Check the documentation of the plugin.

Antonio Pavicevac-Ortiz Over a year ago

That worked my friend \o/ I went and checked the gatsby-config.js and checked the docs in regards to the gatsby-plugin-sitemap and then checked what was in my SiteConfig.js. I made an update to the question which has the rest of that if someone runs into this problem. But thank you again!

Collectives™ on Stack Overflow

WebpackError: Cannot read property 'node' of undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related