Next.js: Stile flackern in dev mit Rückenwind + CSS-Modulen

Erstellt am 3. Mai 2020  ·  13Kommentare  ·  Quelle: vercel/next.js

Fehlerbericht

Beschreibe den Fehler

Ich verwende tailwindcss mit CSS-Modulen und stelle fest, dass beim ersten Laden der Seite nicht alle meine Stile geladen werden. Beim Versuch herauszufinden, was passiert ist, habe ich das Beispiel für Rückenwind ausgeführt und einen Stil aus einem CSS-Modul hinzugefügt. Dies geschieht auch dort, selbst wenn es für Produkte erstellt wurde.

Reproduzieren

Führen Sie das Beispiel unter https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss aus

Fügen Sie eine index.module.css -Datei mit einem bestimmten Stil hinzu

Fügen Sie die Stile aus dem CSS-Modul auf der Seite index.js

Erwartetes Verhalten

Ohne die Verwendung der CSS-Module werden alle Stile beim ersten Mal einwandfrei geladen, ohne zu flackern. Das gleiche Verhalten wird bei Verwendung von CSS-Modulen erwartet

Screenshots

May-03-2020 14-06-19

System Information

  • Betriebssystem: macOS
  • Browser (falls zutreffend) [zB Chrome, Safari]
  • Version von Next.js: v9.3.6
  • Version von Node.js: v13.12.0
  • Version von tailwindcss: v1.4.4
bug 2 next
Quelle
picture tafelito
👍9

Hilfreichster Kommentar

Es gibt eine Problemumgehung, um dieses Problem zu beheben
Erstellen Sie ein benutzerdefiniertes " _document.js " und fügen Sie die Klasse " no-fouc " in die HTML-Komponente ein
Erstellen Sie ein benutzerdefiniertes " _app.js " und fügen Sie den folgenden Code in " componentDidMount " ein.

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

Hinzufügen Fügen Sie diese Stile in den globalen Stilen hinzu:

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

.fouc {
 visibility: visible;
 opacity: 1;
}
picture fadonascimento am 3. Juni 2020
👍6 😕1 👎1

Alle 13 Kommentare

Ich vermute, dass dies etwas mit der automatischen Code-Aufteilung von CSS-Modulen zu tun hat 🤔

Pytal picture Pytal am 7. Mai 2020

Wahrscheinlich im Zusammenhang mit https://github.com/zeit/next.js/issues/10268

mzygmunt picture mzygmunt am 8. Mai 2020
👍1

Ich habe einfache CSS-Module für Komponenten verwendet und Stile gelten nach einigen ms.

dani97 picture dani97 am 27. Mai 2020

Ich habe einfache CSS-Module für Komponenten verwendet und Stile gelten nach einigen ms.

Laut https://stackoverflow.com/a/42969608/943337 habe ich gerade ein leeres Skript-Tag hinzugefügt und mein Problem mit einer Seitenleiste, die beim ersten Laden auftauchte, ist jetzt gelöst.

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 picture Adrianjs42 am 27. Mai 2020

Ich habe einfache CSS-Module für Komponenten verwendet und Stile gelten nach einigen ms.

Laut https://stackoverflow.com/a/42969608/943337 habe ich gerade ein leeres Skript-Tag hinzugefügt und mein Problem mit einer Seitenleiste, die beim ersten Laden auftauchte, ist jetzt gelöst.

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;

Danke @ Adrianjs42 Die Seitenleiste ist in Chrom gestoppt.

dani97 picture dani97 am 28. Mai 2020

Auch verwandt
https://github.com/vercel/next.js/issues/13058

webdeb picture webdeb am 31. Mai 2020

Es gibt eine Problemumgehung, um dieses Problem zu beheben
Erstellen Sie ein benutzerdefiniertes " _document.js " und fügen Sie die Klasse " no-fouc " in die HTML-Komponente ein
Erstellen Sie ein benutzerdefiniertes " _app.js " und fügen Sie den folgenden Code in " componentDidMount " ein.

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

Hinzufügen Fügen Sie diese Stile in den globalen Stilen hinzu:

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

.fouc {
 visibility: visible;
 opacity: 1;
}
fadonascimento picture fadonascimento am 3. Juni 2020
👍6 😕1 👎1

Dies sollte in next@^9.4.5-canary.15 behoben werden! Bitte aktualisieren Sie und lassen Sie es uns wissen.

Timer picture Timer am 22. Juni 2020
👍3 🎉2 👎1

@Timer , ich habe next@^9.4.5-canary.18 installiert. Jetzt erscheint das CSS-Flackern nicht im Entwicklungsmodus , sondern bleibt in der Produktionsversion gleich . Die Produktionsversion hat immer noch den Fehler.

Beachten Sie, dass ich material-ui + css-Module verwende

Hier ist eine Version der App, an der ich gearbeitet habe, um dieses Problem zu lösen :

Prottoy2938 picture Prottoy2938 am 24. Juni 2020
👀1

@ Prottoy2938 Gleich hier. Ich habe zu diesem Problem einen Kommentar abgegeben: https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle picture casperle am 6. Juli 2020

@Timer , ich habe next@^9.4.5-canary.18 installiert. Jetzt erscheint das CSS-Flackern nicht im Entwicklungsmodus , sondern bleibt in der Produktionsversion gleich . Die Produktionsversion hat immer noch den Fehler.

Beachten Sie, dass ich material-ui + css-Module verwende

Hier ist eine Version der App, an der ich gearbeitet habe: cluster-11-lwj6nmcgy.vercel.app .

Ihr Fall scheint nichts mit CSS-Modulen / Rückenwind zu tun zu haben und eher mit dem Vergessen, das Pre-Rendering von Material-UI zu implementieren: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens picture timneutkens am 6. Juli 2020

@casperle , In meinem Fall war das Problem, weil ich serverseitiges Rendern machte . Ich habe diese Dokumentation von material-ui befolgt und das Problem behoben

Prottoy2938 picture Prottoy2938 am 6. Juli 2020

Mit v9.4.5-canary.28 flackert nicht in dev und flackert in der Produktion.

talaikis picture talaikis am 6. Juli 2020
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

renatorib picture renatorib  ·  3Kommentare
wagerfield picture wagerfield  ·  3Kommentare
lixiaoyan picture lixiaoyan  ·  3Kommentare
timneutkens picture timneutkens  ·  3Kommentare
jesselee34 picture jesselee34  ·  3Kommentare