如何让Gatsby忽略无效HTML标签编译错误完成构建？

针对你遇到的因无效HTML标签导致Gatsby构建失败的问题，核心解决思路是捕获html-react-parser的解析错误，避免错误向上抛出中断构建，而非直接让Gatsby或Webpack忽略所有编译错误（这会隐藏其他严重问题）。具体方案如下：

1. 为html-react-parser添加错误处理回调 #

html-react-parser的parse方法支持配置onError选项，可捕获解析过程中的错误并返回自定义内容，从而阻止错误触发Webpack构建失败。

示例代码：

import parse from 'html-react-parser';

// 自定义错误处理函数
const handleParseError = (error) => {
  // 打印警告方便排查，不中断构建
  console.warn(`解析HTML时出错: ${error.message}，内容片段: ${error.source}`);
  // 返回原始出错的HTML内容（不做自动修复），用dangerouslySetInnerHTML渲染
  return <span dangerouslySetInnerHTML={{ __html: error.source }} />;
};

// 在调用parse时传入配置
const parsedContent = parse(post.content, {
  onError: handleParseError
});

这个方案既保留了原始的无效HTML内容，又能让构建顺利完成，同时还能通过控制台警告定位有问题的页面。

2. 全局抑制特定构建错误（仅作最后手段） #

如果上述方案仍无法覆盖所有场景，可通过Gatsby的API全局捕获并忽略特定类型的错误，但此方法会过滤掉匹配的错误，可能导致其他关联问题被隐藏，谨慎使用：

在gatsby-node.js中添加：

exports.onBuild = ({ reporter }) => {
  reporter.setErrorHandler((error) => {
    // 仅忽略特定的HTML解析错误
    if (error.message.includes('Invalid tag')) {
      reporter.warn(`忽略HTML解析错误: ${error.message}`);
      return;
    }
    // 其他错误正常抛出
    throw error;
  });
};

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