GatsbyJS webpack错误，未定义的变量答案

【问题标题】：GatsbyJS webpack error, undefined variablesGatsbyJS webpack错误，未定义的变量
【发布时间】：2018-05-09 14:35:07
【问题描述】：

当我运行 gatsby build 在我的 nginx 服务器上构建公共文件时，我很难理解服务器抛出的错误

error Building static HTML for pages failed
WebpackError: Cannot read property 'map' of undefined

奇怪的是，当我在本地机器上运行 gatsby develop 时，一切正常，没有报错。只有当我在我的 Nginx 服务器上运行 gatsby build 时，才会弹出此错误。两个文件也正确同步。

根据错误，未定义标签。但它确实存在，我使用 localhost graphQL 检查过。然后转到我描述变量的方式，但如果它不起作用，那么标题、slug、日期、html 等其余部分也不应该起作用。但是当我取出标签时它会这样做。

    const {title, date, slug, excerpt } = this.props.data.contentfulBlog;
    const tags = this.props.data.contentfulBlog.category;
    const html = this.props.data.contentfulBlog.childContentfulBlogHtmlTextNode.childMarkdownRemark.html;

    return(
    <div>
      <Helmet> 
            <title>{title}</title>
            <meta name="description" content={excerpt}/>
            <meta name="keywords" content={tags.map((tag) => (String(tag.tagTitle)))}/>
      </Helmet>

所以我不知道为什么在我的服务器上构建它时无法访问 tags 变量，但它可以在本地计算机上运行。谢谢！

【问题讨论】：

标签： javascript reactjs nginx webpack gatsby

【解决方案1】：

虽然我不确定您为什么需要使用元 keywords，因为 Google 和其他搜索引擎 don't use it for their ranking system，但我认为您可以通过执行以下操作来解决您的问题：

<meta name="keywords" content={tags ? tags.map((tag) => (String(tag.tagTitle))) : ''}/>

【讨论】：

【解决方案2】：

我遇到了同样的问题。

在我的例子中，prop x 是一个数组并且是必需的。但是调用 x.map 会返回

cannot read property 'map' of undefined

我通过给 prop x 一个默认值 [] 来修复它。

【讨论】：