Next.js: gaya berkedip-kedip di dev dengan modul tailwind + css

Dibuat pada 3 Mei 2020 · 13Komentar · Sumber: vercel/next.js

Laporan bug

Jelaskan bugnya

Saya menggunakan tailwindcss dengan modul css dan saya perhatikan bahwa saat pertama kali halaman dimuat, semua gaya saya tidak dimuat. Mencoba untuk mencari tahu apa yang terjadi, saya menjalankan contoh tailwindcs dan menambahkan gaya dari modul css dan itu terjadi di sana juga, bahkan ketika dibuat untuk prod.

Untuk Mereproduksi

Jalankan contoh dari https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Tambahkan file index.module.css dengan beberapa gaya

tambahkan gaya dari modul css di halaman index.js

Perilaku yang diharapkan

Tanpa menggunakan modul css, semua gaya dimuat dengan baik untuk pertama kalinya, tanpa berkedip. Perilaku yang sama diharapkan menggunakan modul css

Screenshot

May-03-2020 14-06-19

Sistem Informasi

OS: macOS
Browser (jika berlaku) [mis. Chrome, safari]
Versi Next.js: v9.3.6
Versi Node.js: v13.12.0
Versi tailwindcss: v1.4.4

bug 2 next

Sumber

tafelito

👍9

Komentar yang paling membantu

Ada solusi untuk mengatasi masalah ini
Buat kustom " _document.js " dan tambahkan kelas " no-fouc " di komponen Html
Buat " _app.js " kustom dan tambahkan kode berikut di kolom " componentDidMount "

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

Tambahkan tambahkan gaya ini dalam gaya global:

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

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

fadonascimento pada 3 Jun 2020

👍6 😕1 👎1

Semua 13 komentar

Saya menduga ini mungkin ada hubungannya dengan pemisahan kode otomatis dari modul css 🤔

Pytal pada 7 Mei 2020

Mungkin terkait dengan https://github.com/zeit/next.js/issues/10268

mzygmunt pada 8 Mei 2020

👍1

Saya telah menggunakan modul css biasa untuk komponen dan gaya yang diterapkan setelah beberapa ms.

dani97 pada 27 Mei 2020

Saya telah menggunakan modul css biasa untuk komponen dan gaya yang diterapkan setelah beberapa ms.

Menurut https://stackoverflow.com/a/42969608/943337 saya baru saja menambahkan tag skrip kosong dan masalah sidebar saya yang muncul pada pemuatan pertama, sekarang telah terpecahkan.

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 pada 27 Mei 2020

Saya telah menggunakan modul css biasa untuk komponen dan gaya yang diterapkan setelah beberapa ms.
Menurut https://stackoverflow.com/a/42969608/943337 saya baru saja menambahkan tag skrip kosong dan masalah sidebar saya yang muncul pada pemuatan pertama, sekarang telah terpecahkan.
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;

Terima kasih @ Adrianjs42 bilah samping yang muncul berhenti di krom.

dani97 pada 28 Mei 2020

Juga terkait
https://github.com/vercel/next.js/issues/13058

webdeb pada 31 Mei 2020

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

Tambahkan tambahkan gaya ini dalam gaya global:

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

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

fadonascimento pada 3 Jun 2020

👍6 😕1 👎1

Ini harus diperbaiki dalam next@^9.4.5-canary.15 ! Harap tingkatkan dan beri tahu kami.

Timer pada 22 Jun 2020

👍3 🎉2 👎1

@Timer , saya telah menginstal next@^9.4.5-canary.18 . Sekarang kedipan CSS tidak muncul dalam mode pengembangan , tetapi tetap sama pada versi produksi . Versi produksi masih memiliki bug.

Perhatikan bahwa saya menggunakan modul material-ui + css

Berikut adalah versi aplikasi yang sedang saya kerjakan menghadapi masalah ini: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 pada 24 Jun 2020

👀1

@ Prottoy2938 Sama di sini. Saya membuat komentar untuk masalah ini https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle pada 6 Jul 2020

@Timer , saya telah menginstal next@^9.4.5-canary.18 . Sekarang kedipan CSS tidak muncul dalam mode pengembangan , tetapi tetap sama pada versi produksi . Versi produksi masih memiliki bug.
Perhatikan bahwa saya menggunakan modul material-ui + css
Berikut adalah versi aplikasi yang sedang saya tangani menghadapi masalah ini: cluster-11-lwj6nmcgy.vercel.app .

Tampaknya kasus Anda tidak terkait dengan modul css / tailwind dan lebih banyak lagi terkait dengan lupa mengimplementasikan pra-rendering material-ui: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948