时间戳

首页 > 解决方案 > GatsbyJS webpack错误，未定义的变量

javascript - GatsbyJS webpack错误，未定义的变量

问题描述

当我运行 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 变量，但它可以在本地机器上运行。谢谢！

标签： javascriptreactjsnginxwebpackgatsby

解决方案

虽然我不确定为什么您需要使用元数据keywords，因为 Google 和其他搜索引擎不将它用于他们的排名系统，但我认为您可以通过执行以下操作来解决您的问题：

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

推荐阅读