Twitter「フォロー」ボタンが表示されません。テキストのみ

Question

最初に、私はthis,thisとthisと多くの他の "Twitterボタンはレンダリングしていません"と読みました。彼らの誰も私の問題のための解決策を持っていません。

私はお互いの近くに2つのTwitterボタンを持っています。 Tweetボタンはすべてレンダリングされますが、Followボタンはレンダリングされません。 FFやChromeではエラーや警告はコンソールにスローされません。 Twitterのウィジェット<script>コードは大丈夫です - 私はそれをコピー/貼り付け、タイプミスなどはありません。

どうやら問題は、「ツイート」ボタンがうまく表示されているので、ページ内にロードされないことTwitterウィジェットとは何の関係もありません。

しかしTwitterに追加された奇妙なクラス名は<a>ボタンのtwitter-follow-button-errorです。 Google全体ではこのクラスについて2つの結果しかありません。どちらも関連性がありません。 Twitter APIのdocsはそれについて何も言わない。

何ができますか？これが原因ですか？どのようにそれを解決するには？

<div key={key}> 
    {/* Follow doesn't render */} 
    <a className="twitter-follow-button" 
     href={href} data-size="large" 
     data-show-screen-name="true" 
     data-show-count="true">Follow</a> 

    {/* Tweet renders all right */} 
    <span className={`${css.btn_dist}`}> 
     <a className="twitter-share-button" 
      href={href} 
      lang="en" 
      data-size="large">Tweet</a> 
    </span> 
</div> 

Answer 1

私は（64ビット）クロム61.0.3163.100（公式ビルド）を使用してエラーを再現することができます。

あなたはF12を押すと、それはTwitterのJavaScriptは、コンソールにエラーがない約束c.reject(new Error("cannot hydrate widget before it is initialized"))

に拒否に壊れるページをロードするが、それはクロームの私のバージョンでは、このエラーに一時停止した場合。エラーが表示されなくなり、有効なのhrefを使用する場合

<a class="twitter-follow-button" 
    href="http://www.wut.com" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a> 

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> 

：以下のリンクは、次のコードを使用してtwitter-follow-button-errorクラスを持つ

<a class="twitter-follow-button" 
    href="https://twitter.com/TwitterDev" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a> 

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> 

すると、あなたのdevのツールは例外で一時停止していることを確認します（私はする必要はありませんでしたキャッチされた例外で一時停止を確認してください）