Gatsby 构建在无效的 HTML 标签上失败（WebpackError）

Question

我要转到 Gatsby 大型新闻网站（超过 60.000 页）。一些迁移的页面在 HTML 中有错误，例如：

lorem <b, ipsum dolor sit

它导致构建错误：

failed Building static HTML for pages - 3.384s

 ERROR #95313  HTML.COMPILATION

Building static HTML failed for path "/lorem-ipsum/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  19 |
  20 |  // Split the array in 2 parts
> 21 |  var left = components.slice(0, split);
     | ^
  22 |  var right = components.slice(split);
  23 |
  24 |  return Array.prototype.concat.call([], decodeComponents(left), decodeComponents(right));

WebpackError: Invalid tag: b,

很明显是因为在 HTML 中没有标签“b,”（b 带逗号）。 :)

我们不考虑自动尝试更正 HTML 代码，因为它们会导致不可预测的结果。 在将其移交给客户之前，我想使该站点合理地防弹。防弹，即我想尽量减少构建过程中出错的风险。

在 HTML 代码错误的情况下构建总比完全不构建要好。然后用户将有机会更正页面代码并重新构建它。

那么有没有可能强制 Gatsby 和 Webpack 忽略这些类型的 HTML 错误？

编辑：

上面的错误来自这行代码：

{parse(post.content)}

parse() 来自“html-react-parser”

Answer 1

最终消毒剂起到了作用：https://github.com/remarkablemark/html-react-parser/issues/124#issuecomment-538212031

import sanitizeHtml from 'sanitize-html';

const cleanPostContent = sanitizeHtml(post.content);

return (
        <>
            {parse(cleanPostContent)}
        </>
    )

Answer 2

不建议强制 Gatsby 和 Webpack 忽略 HTML 错误，因为这会导致不可预知的结果，并可能在网站上造成安全漏洞。最好在构建网站之前修复 HTML 错误。

但是，如果您必须继续构建带有 HTML 错误的网站，您可以尝试在 Gatsby 配置文件 (gatsby-config.js) 中将 html.validate 选项设置为 false。这将在构建过程中禁用 HTML 验证，并可能允许构建在 HTML 错误的情况下完成。

请注意，不建议禁用 HTML 验证，因为它可能导致意外行为，并可能在未来产生问题。最好尽快修复 HTML 错误以避免潜在问题。