WebpackError: Cannot read property 'node' of undefined

Question

我正在与 Gatsby.js 合作，尝试使用 gatsby build 进行生产构建。

在构建 HTML 页面时，我在终端中收到此错误。

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

这是有问题的页面：

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;

2018 年 3 月 5 日更新

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;

也像 Sarasate 在下面所说的那样，在你的 siteConfig.js 中你应该包括这个：

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

Answer 1

由于某种原因，您的 graphql 查询没有返回 this.props.data.allAuthorsJson 的数据。

如果是这种情况，您的三元运算符仍然 returns 是一个空数组。您尝试在下一行访问它：authorsEdges[0] 这将失败，因为在这种情况下数组中没有元素。如果没有作者，你就无法渲染任何东西。

一个简单的解决方案：

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;

WebpackError: Cannot read property 'node' of undefined

WebpackError: Cannot read property 'node' of undefined

reactjs

webpack

gatsby