Next.js: styles scintillant en dev avec les modules tailwind + css

Créé le 3 mai 2020 · 13Commentaires · Source: vercel/next.js

Rapport d'erreur

Décrivez le bogue

J'utilise tailwindcss avec des modules css et je remarque que la première fois que la page se charge, tous mes styles ne sont pas chargés. En essayant de comprendre ce qui se passait, j'ai exécuté l'exemple tailwindcss et ajouté un style à partir d'un module css et cela se produit là aussi, même lorsqu'il est construit pour prod.

Reproduire

Exécutez l'exemple de https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Ajoutez un fichier index.module.css avec du style

ajoutez les styles du module css dans la page index.js

Comportement prévisible

Sans l'utilisation des modules css, tous les styles sont chargés correctement la première fois, sans scintillement. Le même comportement est attendu en utilisant les modules css

Captures d'écran

May-03-2020 14-06-19

Informations système

OS: macOS
Navigateur (le cas échéant) [par exemple, chrome, safari]
Version de Next.js: v9.3.6
Version de Node.js: v13.12.0
Version de tailwindcss: v1.4.4

bug 2 next

Source

tafelito

👍9

Commentaire le plus utile

Il existe une solution de contournement pour résoudre ce problème
Créez un " _document.js " personnalisé et ajoutez la classe " no-fouc " dans le composant Html
Créez un " _app.js " personnalisé et ajoutez le code suivant dans le componentDidMount "

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Ajoutez ajoutez ces styles dans les styles globaux:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento le 3 juin 2020

👍6 😕1 👎1

Tous les 13 commentaires

Je soupçonne que cela peut avoir quelque chose à voir avec le fractionnement automatique du code des modules css 🤔

Pytal le 7 mai 2020

Probablement lié à https://github.com/zeit/next.js/issues/10268

mzygmunt le 8 mai 2020

👍1

J'ai utilisé des modules css simples pour les composants et les styles s'appliquent après quelques ms.

dani97 le 27 mai 2020

J'ai utilisé des modules css simples pour les composants et les styles s'appliquent après quelques ms.

Selon https://stackoverflow.com/a/42969608/943337, je viens d'ajouter une balise de script vide et mon problème d'une barre latérale qui apparaissait au premier chargement est maintenant résolu.

https://github.com/vercel/next-plugins/issues/455#issuecomment -489452379

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Adrianjs42 le 27 mai 2020

J'ai utilisé des modules css simples pour les composants et les styles s'appliquent après quelques ms.
Selon https://stackoverflow.com/a/42969608/943337, je viens d'ajouter une balise de script vide et mon problème d'une barre latérale qui apparaissait au premier chargement est maintenant résolu.
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Merci @ Adrianjs42, la barre latérale qui apparaît s'est arrêtée en chrome.

dani97 le 28 mai 2020

Aussi lié
https://github.com/vercel/next.js/issues/13058

webdeb le 31 mai 2020

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Ajoutez ajoutez ces styles dans les styles globaux:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento le 3 juin 2020

👍6 😕1 👎1

Cela devrait être corrigé dans next@^9.4.5-canary.15 ! Veuillez mettre à jour et laissez-nous savoir.

Timer le 22 juin 2020

👍3 🎉2 👎1

@Timer , j'ai installé next@^9.4.5-canary.18 . Désormais, le scintillement CSS n'apparaît pas en mode de développement , mais il reste le même sur la version de production . La version de production a toujours le bogue.

Notez que j'utilise des modules material-ui + css

Voici une version de l'application sur laquelle je travaille pour faire face à ce problème: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 le 24 juin 2020

👀1

@ Prottoy2938 Même chose ici. J'ai fait un commentaire sur ce problème https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle le 6 juil. 2020

@Timer , j'ai installé next@^9.4.5-canary.18 . Désormais, le scintillement CSS n'apparaît pas en mode de développement , mais il reste le même sur la version de production . La version de production a toujours le bogue.
Notez que j'utilise des modules material-ui + css
Voici une version de l'application sur laquelle j'ai travaillé pour faire face à ce problème: cluster-11-lwj6nmcgy.vercel.app .

Il semble que votre cas ne soit pas lié aux modules css / tailwind et plus encore lié à l'oubli d'implémenter le pré-rendu de material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens le 6 juil. 2020

@casperle , Dans mon cas, le problème était que je faisais un rendu côté serveur . J'ai suivi cette documentation de material-ui et j'ai résolu le problème

Prottoy2938 le 6 juil. 2020

Avec v9.4.5-canary.28 ne scintille pas en dev et scintille en production.