Twitter "Suivre" bouton n'apparaît pas. Seulement le texte

Question

D'abord, j'ai lu this, this et this et beaucoup d'autres dehors là sur "le bouton de Twitter ne rend pas". Aucun d'entre eux n'a de solution pour mon problème.

J'ai deux boutons Twitter à proximité l'un de l'autre. Tweet rend le bouton tout droit, Follow le bouton ne rend pas. Aucune erreur ou avertissement n'est lancé sur la console, ni dans FF, ni dans Chrome. Le widget Twitter <script> est correct - je le copie/colle, pas de faute de frappe ou quoi que ce soit.

Apparemment, la question n'a rien à voir avec ce widget Twitter ne se charge pas en page parce que le bouton « Tweet » est affiché très bien.

Cependant, il existe un nom de classe étrange que Twitter ajoute à <a> élément du bouton - twitter-follow-button-error. Et tout Google n'a que deux résultats sur cette classe, les deux ne sont pas pertinents. Les documents de l'API Twitter ne disent rien à ce sujet.

Que peut-il être? Est-ce la cause? Comment le résoudre?

<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

Je peux reproduire votre erreur avec du chrome 61.0.3163.100 (Build officiel) (64 bits).

Lorsque vous appuyez sur F12 et charger la page, il se brisera sur Twitter une promesse JavaScript rejette c.reject(new Error("cannot hydrate widget before it is initialized"))

Il n'y a pas d'erreur dans la console, mais il fait une pause sur cette erreur dans ma version de Chrome. Le lien de suivi a une classe twitter-follow-button-error en utilisant le code suivant:

<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> 

Lorsque vous utilisez un href valide, l'erreur disparaît:

<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> 

Assurez-vous que vos outils de dev met en pause en cas d'exception (je ne devais pas vérifier la pause sur les exceptions interceptées)