reactjs Gatsby构建在无效HTML标记上失败(WebpackError)

gstyhher  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(122)

我正在迁移到盖茨比大型新闻网站(超过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()来自"htmlReact解析器"

kwvwclae

kwvwclae1#

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

import sanitizeHtml from 'sanitize-html';

const cleanPostContent = sanitizeHtml(post.content);

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

相关问题