事象
・ページ読み込み時にエラーが出てしまう
・ユーザー操作をしたときにもエラーが出てしまう
・プロダクションビルドでは発生しないっぽい？

ローカルで動かしていると、ファイル保存してホットリロード効かせるとエラー表示が消えますが、何らかの操作をするとすぐに発生するようになる
→レンダリングを契機にしている処理が絡んでいる？？

サマリ

原因
Adobeのフォントを使っていて、そのフォントを使うためのJavaScript埋め込みコードでエラーになってた

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

対処

WIP

Gekitenius.Y

諸々切り分けた結果、特定の文字列を入れると出てしまうらしい、、、
fontがどうって言ってるしCSSも見てみないとな

Gekitenius.Y

補足：一番上のスレッドではこのh1タグにhidden要素入れて表示していないだけ（このスクラップ書くために表示したくなかったので）

Gekitenius.Y

原因の文字特定した。
これ以外にもエラー起こす字はあったけど、これなら公開できる。
漢字にだけ当たるfontとかあるんか、よく知らないけど、、、
存在したとしてそんなクセ強font使ってるのか？？？

Gekitenius.Y

このコンポーネントにだけ当たるCSSは関係ないらしい😫
親コンポーネント当たってみるか

Gekitenius.Y

フォロワーさんに教えていただいたやつ
以前見かけた記事だけど実際にトラブルシュートで使うことになるとは
なお、該当ファイルとその周辺含めてutf-8（BOMなし）で保存されてたので、この問題ではないっぽい😭

Gekitenius.Y

見つけたー！！！

ブレイクポイント貼って地道にエラーまでの道のりを確認していくとspk2his.jsファイルでエラーになる
→Adobe？？やはりフォント関係か、index.htmlとか見てみるか。
→index.htmlになんかいる
→こいつを消すとエラーが起きなくなる！！！

    <script>
      (function (d) {
        var config = {
          kitId: 'spk2his',
          scriptTimeout: 3000,
          async: true
        },
          h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
      })(document);
    </script>

Gekitenius.Y

ここで設定するkitIdというのはAdobe サブスクリプションライセンス単位で発番されるものらしい。
フォントごとの情報ではなく、このライセンスを取得したときのユーザーとフォントの利用ライセンスを紐づけるための情報らしい。

ここのセットアップをした担当者に聞かないとわからないのでとりあえずエスカレが必要そう。

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>