Nuxtのビルド時に[error] Error generating route "/": HTML minification failed.

ページは正常に表示できているので、エラーに気づくまでに時間がかかりました。

Contents

環境
エラー内容と原因

環境

nuxt 2.14.0

エラー内容と原因

エラーの内容

Error generating route "/business": HTML minification failed. Make sure the route generates valid HTML. Failed HTML:   22:13:36
 <!doctype html>
<html data-n-head-ssr>
  <head >
    <title>Nuxt.js project starter template</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="This is Nuxt.js project starter template."><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="ssr" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"><link rel="preload" href="/_nuxt/runtime.17bfe39.js" as="script"><link rel="preload" href="/_nuxt/vendors/commons.3268a7e.js" as="script"><link rel="preload" href="/_nuxt/app.0cc2265.js" as="script">
 * ress.css • v3.0.0
 * MIT License
...

長いのでめっちゃ省略しました。

どうやらHTMLの書き方に悪いところがあるようで、HTMLの圧縮に失敗したとのことです。

このままでもページは表示されているのですが、圧縮化についてなのでサイトパフォーマンスに影響がありそうですね、、

原因

該当のページで各コンポーネントを検証した結果、コンポーネントに渡していたデータ内に不備がありました。

具体的にはタグの属性にバッククォートを使用していたのが原因でした。

<p class=`hoge`>テキスト</p>

テンプレート内で記述していればeslintでエラーが出て気づけたのですが、データでHTMLを作成していたのでlinterが発動しなかったようです。（そして誰も気づけなかった・・）

<script>
const data = [
  {
    title: 'タイトル',
    text:
      '<p class=`hoge`>ほげほげテキストほげほげテキストほげほげテキストほげほげテキスト</p><p class=`hoge`>ほげほげテキストほげほげテキストほげほげテキストほげほげテキスト</p>',
  },
  ...
]
</script>

他にも一部のマークアップ記号（文字参照だっけ？）を使用するとミニファイ化に失敗するようです。
HTML minification failed when you use ‘<3’

Nuxtのビルド時に[error] Error generating route “/”: HTML minification failed.

環境

エラー内容と原因

エラーの内容

原因