GatsbyJS在Nginx服务器执行gatsby build时出现Webpack未定义变量错误

这个报错的核心原因很明确：你的代码在尝试对undefined值调用map方法——也就是服务器构建时this.props.data.contentfulBlog.category是未定义的，但本地环境中该字段正常存在。结合本地正常、服务器异常的差异，我整理了几个最可能的原因和对应的解决办法：

1. 服务器与本地的Contentful数据存在差异 #

最常见的情况是：你本地用的Contentful开发环境中，所有博客条目都正确设置了category字段，但服务器配置的是生产环境，其中某篇（或多篇）博客没有填写category。

Gatsby的静态构建会遍历所有页面数据，只要有一个条目缺失该字段，就会触发这个错误；而本地gatsby develop可能因为按需加载的策略，没加载到有问题的那篇博客，所以没暴露这个问题。

解决办法：

• 检查服务器环境变量中的CONTENTFUL_SPACE_ID和CONTENTFUL_ACCESS_TOKEN，确认对应的Contentful环境。
• 登录Contentful后台，遍历该环境下的所有博客条目，确保每篇都设置了category字段。

2. 代码未做空值防御处理 #

即使大部分博客都有category，也可能存在个别条目该字段为null或undefined，你的代码没有做容错处理，导致构建失败。

解决办法：
修改代码，给tags设置默认空数组，同时处理meta标签的内容格式（需要是逗号分隔的字符串）：

const {title, date, slug, excerpt } = this.props.data.contentfulBlog;
// 给category设置默认空数组，避免undefined
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}/>
      // map后用join转成逗号分隔的字符串，同时确保tags为空时返回空字符串
      <meta name="keywords" content={tags.map((tag) => String(tag.tagTitle)).join(', ')}/>
    </Helmet>
    {/* 其他组件内容 */}
  </div>
)

3. 服务器端Gatsby缓存残留 #

有时候服务器上的旧缓存会导致数据不一致，即使你已经同步了代码，缓存中的旧数据仍会影响构建。

解决办法：
在服务器上执行以下命令，清除缓存后重新构建：

gatsby clean
gatsby build

额外验证步骤 #

如果以上方法都没解决，可以在服务器上临时运行gatsby develop（如果服务器允许对外暴露端口），打开http://<服务器IP>:8000/___graphql，执行如下查询，检查是否有博客的category为null：

query {
  allContentfulBlog {
    nodes {
      title
      category {
        tagTitle
      }
    }
  }
}

通过这些步骤，应该能定位并解决服务器构建报错的问题。

内容的提问来源于stack exchange，提问作者cake_lord_97