Next.js: 追い風+ cssモジュールを使用した開発でちらつくスタイル

作成日 2020年05月03日 · 13コメント · ソース: vercel/next.js

バグレポート

バグを説明する

cssモジュールでtailwindcssを使用していますが、ページを初めてロードしたときに、すべてのスタイルがロードされていないことに気付きました。何が起こっているのかを理解しようとして、tailwindcssの例を実行し、cssモジュールからスタイルを追加しました。これは、prod用にビルドされた場合でも発生します。

再現するには

https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcssから例を実行し

なんらかのスタイルでindex.module.cssファイルを追加します

index.jsページのcssモジュールからスタイルを追加します

予想される行動

cssモジュールを使用しない場合、すべてのスタイルが最初はちらつくことなく正常に読み込まれます。 cssモジュールを使用しても同じ動作が期待されます

スクリーンショット

May-03-2020 14-06-19

システムインフォメーション

OS：macOS
ブラウザ（該当する場合）[例：chrome、safari]
Next.jsのバージョン：v9.3.6
Node.jsのバージョン：v13.12.0
tailwindcssのバージョン：v1.4.4

bug 2 next

ソース

tafelito

👍9

最も参考になるコメント

この問題を解決するための回避策があります
カスタム「 _document.js 」を作成し、Htmlコンポーネントにクラス「 no-fouc 」を追加します
カスタム「 _app.js 」を作成し、「 componentDidMount 」に次のコードを追加します

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

追加このスタイルをグローバルスタイルに追加します。

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

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

fadonascimento 2020年06月03日

👍6 😕1 👎1

全てのコメント13件

これは、cssモジュールの自動コード分割と関係があるのではないかと思います🤔

Pytal 2020年05月07日

おそらくhttps://github.com/zeit/next.js/issues/10268に関連してい

mzygmunt 2020年05月08日

👍1

私はコンポーネントにプレーンなcssモジュールを使用し、数ミリ秒後にスタイルが適用されます。

dani97 2020年05月27日

私はコンポーネントにプレーンなcssモジュールを使用し、数ミリ秒後にスタイルが適用されます。

https://stackoverflow.com/a/42969608/943337によると、空のスクリプトタグを追加したところ、最初の読み込み時にサイドバーがポップアップするという問題が解決されました。

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 2020年05月27日

私はコンポーネントにプレーンなcssモジュールを使用し、数ミリ秒後にスタイルが適用されます。
https://stackoverflow.com/a/42969608/943337によると、空のスクリプトタグを追加したところ、最初の読み込み時にサイドバーがポップアップするという問題が解決されました。
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に感謝します。飛び出すサイドバーは、クロムで止まりました。

dani97 2020年05月28日

webdeb 2020年05月31日

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

追加このスタイルをグローバルスタイルに追加します。

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

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

fadonascimento 2020年06月03日

👍6 😕1 👎1

これはnext@^9.4.5-canary.15で修正する必要があります！アップグレードしてお知らせください。

Timer 2020年06月22日

👍3 🎉2 👎1

@Timer 、 next@^9.4.5-canary.18をインストールしました。これで、CSSのちらつきは開発モードでは表示されませんが、製品版では同じままです。製品版にはまだバグがあります。

私はmaterial-ui + cssモジュールを使用していることに注意してください

この問題に直面するために私が取り組んできたアプリのバージョンは次のとおりです： https ：

Prottoy2938 2020年06月24日

👀1

@ Prottoy2938ここでも同じです。この問題にコメントしましたhttps://github.com/vercel/next.js/issues/13058#issuecomment-654165987

casperle 2020年07月06日

@Timer 、 next@^9.4.5-canary.18をインストールしました。これで、CSSのちらつきは開発モードでは表示されませんが、製品版では同じままです。製品版にはまだバグがあります。
私はmaterial-ui + cssモジュールを使用していることに注意してください
この問題に直面するために私が取り組んできたアプリのバージョンは次のとおりです： cluster-11-lwj6nmcgy.vercel.app 。

これは、あなたのケースがcssモジュール/追い風とは無関係であり、material-uiの事前レンダリングの実装を忘れることに関連しているようです： https ：

timneutkens 2020年07月06日

@casperle 、私の場合、問題はサーバー側のレンダリングを行っていたためでした。私はmaterial-uiからこの

Prottoy2938 2020年07月06日

v9.4.5-canary.28では、開発時にちらつきがなく、本番環境でちらつきがありません。

talaikis 2020年07月06日

このページは役に立ちましたか？

0 / 5 - 0 評価