我正在与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
};
答案 0 :(得分:1)
由于某种原因,您的graphql查询中没有为blaablaaa
返回任何数据。
如果是这样的话,你的三元运算符仍会返回一个空数组。您尝试在下一行中访问它:this.props.data.allAuthorsJson
将失败,因为在这种情况下数组中没有元素。如果没有作者,则无法渲染任何内容。
一个简单的解决方案:
authorsEdges[0]