@ jonathan-chin gatsby info --clipboard実行して、関連する環境情報を提供していただけますか？

また、共有したリポジトリでpackage.jsonのGatsbyv1を使用していることに気付きました。 Gatsby v1にはgatsby-cliバージョン1.x.xを使用してください。 gatsby-cliバージョン2.x.xはGatsbyv2用です

@kakadiadarpan

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.4.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmPackages:
    gatsby: ^1.9.277 => 1.9.278
    gatsby-image: ^1.0.24 => 1.0.55
    gatsby-link: ^1.6.28 => 1.6.46
    gatsby-plugin-canonical-urls: ^1.0.11 => 1.0.18
    gatsby-plugin-google-analytics: ^1.0.12 => 1.0.31
    gatsby-plugin-google-fonts: 0.0.3 => 0.0.3
    gatsby-plugin-material-ui: ^0.1.3 => 0.1.3
    gatsby-plugin-nprogress: ^1.0.10 => 1.0.14
    gatsby-plugin-react-helmet: ^1.0.5 => 1.0.8
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
    gatsby-plugin-sass: ^1.0.26 => 1.0.26
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-autolink-headers: ^1.4.8 => 1.4.19
    gatsby-remark-copy-linked-files: ^1.5.36 => 1.5.37
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-responsive-iframe: ^1.4.19 => 1.4.20
    gatsby-source-filesystem: ^1.5.8 => 1.5.39
    gatsby-transformer-remark: ^1.7.21 => 1.7.44
    gatsby-transformer-sharp: ^1.6.14 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 2.0.0-rc.1
    gatsby: 1.9.278

グローバルgatsby-cliを1.9.Xにダウングレードすると、CSSの問題が発生します。 2.0.0-rc.1のままにすると、 BrowserslistError: Unknown browser query deadエラーが発生します

@ jonathan-chin gatsby-cliバージョン1.9.xでCSSの問題が発生していることを理解していますが、使用しているGatsbyバージョンと互換性があるため、これを使用する必要があります。

複製リポジトリを共有していただきありがとうございます。 それを見てみましょう。

@ jonathan-chin開発とビルドでどのCSSが正確に異なるかを知ることは可能ですか？

@kakadiadarpan
これは開発によるものであり、期待されるスタイリングです

これは私がビルドから得たものです：

それらのCSSクラスが異なることがわかります。

これが以前の問題だったことを覚えていません。 最後の良いビルド（CSSが影響を受けなかった場合）はhttps://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19でした

これに対する修正は＃8092だと思います。

@ jonathan-chinその修正の内容をプルダウンして、それらの変更を試すことができますか？ 注：まだご覧になっていない場合は、Gatsbyのドキュメントの「投稿方法」セクションにgatsby-dev-cliを設定する方法に関する情報が含まれています。これは、テストする必要があります。

また、@ jonathan-chinは、Gatsbyv1を使用しているように見えます。 この修正を取得するためにGatsbyv2にアップグレードできますか？

@DSchau申し訳ありませんが、これに戻るのにとても時間がかかりました。

既存のプロジェクトをv2に移行するのは大変な作業でした。 新しいv2スターターを起動し、1つずつ移行することにしました（必要に応じてコピーして変更します）。 この場合、gatsbydevelopはgatsbybuildとは根本的に異なる出力を生成します。

gatsbyビルド

ギャツビー開発

ビルドと開発で2つの同一要素のcssスタイルを比較します。

ビルド：

.jss94 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
}

発展させる：

.MuiTypography-headline-88 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.35417em;
}

v2のレイアウトコンポーネントにロードするscssをオーバーライドするマテリアルUIがいくつかあります。 開発では、それらをうまくマージしているように見えますが、ビルドでは、それらを無視しているようです？ それが原因でしょうか？

私はimport '../scss/style.scss';持っています

@ jonathan-chinこれをv2で試しましたか、それとも上記のコメントに記載されてに従って行いましたか？

@kakadiadarpan申し訳ありませんが、そのワークフローを設定する能力（つまり時間）がありません。

PRの修正を確認したところ、私が経験しているのと同じ問題のようです。 今のところこの問題を解決してPRを監視できます。

@kakadiadarpan申し訳ありませんが、私はちょうど奇妙なことに気づきました。

私のサイトが最初に読み込まれるとき、CSSは風変わりです。 ただし、インデックスページの再読み込みを強制すると、CSSは正常に読み込まれます。 再現する手順は次のとおりです。

1） https://sharemeals.org/をロードし
下に向かってエマーソンの引用を調べてください：

2）左上のサイト名をクリックします。 サイトを更新せずにインデックスページをリロードします。 エマーソンの見積もりは期待どおりに表示されます。

（エマーソンの引用は他のCSSの変更を示しています。最も目立つので、これを呼び出しているだけです）

@ jonathan-chin更新していただきありがとうございます。 ご提供いただいた手順で問題を再現することができます。 https://sharemeals.org/にGatsby v1またはv2を使用していますか？

〜私はこれとまったく同じ問題を抱えています：〜

〜使用してinjectGlobal私が実行した後diffentスタイルを取得していますgatsby build 。 あなたはここで問題を見ることができます： https ：

〜ページの読み込みが完了したら、リンク「書き込み」または「作業」にカーソルを合わせると、スタイルが変更されます。〜

見出しのスタイルをグローバルでpage.jsなく

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/n/bin/node
    Yarn: 1.2.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/n/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.7 => 2.0.8
    gatsby-plugin-google-analytics: ^2.0.0-rc.2 => 2.0.0-rc.2
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-remark-prismjs: ^3.0.1 => 3.0.1
    gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1
    gatsby-transformer-remark: ^1.7.44 => 1.7.44

"gatsby": "^1.9.277"を使用している@kakadiadarpan

これに対する修正は＃8092だと思います。

@ jonathan-chinその修正の内容をプルダウンして、それらの変更を試すことができますか？ 注：まだご覧になっていない場合は、Gatsbyのドキュメントの「投稿方法」セクションにgatsby-dev-cliを設定する方法に関する情報が含まれています。これは、テストする必要があります。

@ jonathan-chinこのコメントで@DSchauから提供された提案を試すことができますか？

@kakadiadarpan私は今これを実装しようとしたと思います。 gatsby-cli-devをインストールし、フォークしてプルし、ブランチを切り替えました。

問題はまだ解決していません。

私が持っている新しいnode_modules / gatsbyが古いものではなく正しいことを再確認するにはどうすればよいですか？

Gatsby 1.XXを使用し、修正を提案せずに、さらに調査を行いました。

（Gatsby 2.XXにアップグレードしてみましたが、修正案が個別に提案されましたが、どちらも機能しませんでした）

目的のスタイルのjssクラスは、最初のページロードに存在します。 この場合、.jss58です。 ただし、私が見ている要素は、初期ロード時に.jss58を取得しません。 別のページリクエストを行った後（同じページをリクエストした場合でも）、要素は正しく.jss58を取得します

では、どのjssクラスを適用するかを決定するのは何の責任ですか？ 最初の読み込みでは1つの結果が得られますが、後続のすべてのページリクエストでは異なる読み込みが行われる理由はありますか？

編集：他のいくつかの主要な問題があります。 本番ビルドでは、ページのリクエストに関係なく、svgアイコンが完全に読み込まれることはありません。

これは私が開発で代わりに得るものです：

私は同じ問題に直面しています。 gatsby開発バージョンとgatsbyビルドバージョンは私にとって非常に異なります。

直接アクセスするか、material-uiコンポーネントでページを更新すると、それらのコンポーネントのCSSが壊れます。 クラスはソースに存在しますが、要素には適用されません。 ただし、同じページに<Link>をたどると、すべて正常に機能します。

また、私は実行する場合ことに気づいたgatsby buildながらgatsby develop実行されている、開発ギャツビー版もギャツビービルドバージョンとまったく同じように行動を開始します。

System:
    OS: Linux 3.10 Red Hat Enterprise Linux Workstation 7.3 (Maipo)
    CPU: x64 Intel(R) Xeon(R) CPU E5-2620 v4 @ 2.10GHz
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 11.1.0 - /usr/bin/node
    Yarn: 1.12.1 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
  npmPackages:
    gatsby: 2.0.37 => 2.0.37
    gatsby-cli: 2.4.4 => 2.4.4
    gatsby-plugin-typography: 2.2.1 => 2.2.1
    gatsby-source-atom: 0.1.0 => 0.1.0
    gatsby-source-ghost: 2.1.2 => 2.1.2
  npmGlobalPackages:
    gatsby-cli: 2.4.4

（私はgatsby-plugin-offlineを使用したことがありません）

あなたはhttp://pawanhegde.netlify.comでウェブサイトをチェックアウトすることができます
ソースはhttps://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjsにあります

「期待される」バージョンを表示するには、下部にあるコミカルな大きなアイコンのいずれかをクリックします。

＃8092の修正を試す時間がまだありません

＃8092の修正を試す時間がまだありません

それは私にとって問題を修正しませんでした。 私はまだ同じ振る舞いを見ます。

期待される

実際

直接アクセスするか、ページを更新すると...これらのコンポーネントのCSSが壊れます。 クラスはソースに存在しますが、要素には適用されません。 ただし、同じページに<Link>をたどると、すべて正常に機能します。

これも私が説明したとおりに起こっています。 https://github.com/gatsbyjs/gatsby/pull/8092で修正を試しましたが、ほとんどのページで機能しましたが、すべてのページで機能するわけではありませんでした。

期待：

実際：

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 62.0.3
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.46 => 2.0.46 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-link: ^2.0.6 => 2.0.6 
    gatsby-plugin-catch-links: ^2.0.8 => 2.0.8 
    gatsby-plugin-flow: 1.0.2 => 1.0.2 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1 
    gatsby-plugin-root-import: 2.0.4 => 2.0.4 
    gatsby-plugin-sass: ^2.0.4 => 2.0.4 
    gatsby-plugin-sharp: 2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-svgr: 2.0.0-alpha => 2.0.0-alpha 
    gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6 
    gatsby-remark-images: 2.0.6 => 2.0.6 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6 
    gatsby-remark-smartypants: 2.0.6 => 2.0.6 
    gatsby-source-filesystem: 2.0.8 => 2.0.8 
    gatsby-source-wordpress: 3.0.13 => 3.0.13 
    gatsby-transformer-remark: 2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 

私は次のようにしてこの問題を解決しました
私が持っていたindex.jsファイルに

import 'injectSheet' from react-jss
import './../bootstrap.min.css'

順序を逆にすることで、cssをインポートする順序をhtmlに指定することができました。
だから、私の最終的なコードは

import './../bootstrap.min.css'
import 'injectSheet' from react-jss

解決策：インポートの順序を変更する
これは私にとって問題を解決しました。 うまくいけば、それはあなたに同じことをします。

私は他の多くの中で同じ問題を抱えています：

• developは非決定的に実行されますが、実行されると正常に機能します。
• StaticQueryは、画像の読み込みを非決定的に完了できません。
• buildは非決定論的に失敗し、通常は画像関連のセグメント障害です。
• build出力は、 develop出力とは大きく異なります。これが取引のブレーカーです。
• developとbuildは相互作用しているようです。

これらの問題は非常にドラッグであるため、残念ながらGatsbyの利点を上回っているように見え、Create ReactAppに戻す必要があります。

すべてのインラインスタイルを削除したり、ルートレベルではなく子コンポーネントに.scssをインポートしたりするなど、さまざまな回避策を試しました。
それでも問題は解決しません。 これは本当に厄介です

私はスタイル付きコンポーネントを使用していますが、 gatsby-plugin-styled-componentsにgatsby-config.js gatsby-plugin-styled-componentsを追加するとうまくいきました。

同じ問題があります。
Gatsbyビルドは異なるクラス名を適用しますが、Reactインスペクターで適切なクラスが適用されていることがわかります。

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 59.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.107 => 2.0.107
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-google-analytics: ^2.0.9 => 2.0.9
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.19
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
    gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.16 => 2.0.16
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.12 => 2.0.12
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.6

ひや！

この問題は静かになりました。 不気味な静か。 👻

多くの問題が発生しているため、現在、30日間使用されなかった後に問題をクローズしています。 ここでの最後の更新から少なくとも20日が経過しています。

この問題を見逃した場合、または開いたままにしておきたい場合は、ここに返信してください。 この問題を開いたままにするために、「古くない」というラベルを追加することもできます。

Gatsbyコミュニティに参加していただきありがとうございます。 💪💜

開いたままにしてください。

問題はまだ解決されていません。 少し開いたままにしてください

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

問題はまだ解決されていません。 少し開いたままにしてください

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

https://github.com/gatsbyjs/gatsby/issues/11072で参照されているように、問題は7058a256d2dcfab91259bdf00e811375737414e7で解決する必要があります。

私の特定のユースケースでのみ、 @emotion/globalがアプリケーションにグローバルスタイルを挿入するために使用されました。 どういうわけか、コード分割の問題は、 @emotion/global機能と組み合わせてもまだ残っていました。

回避策の修正

問題を解決するために、次の手順が実行されました。 完璧なソリューションではありませんが、このセットアップでは機能しました。

1. 最新のGatsbyビルドに更新^2.1.8
2. import { Global, css } from '@emotion/core'が使用されている場所を見つけて、CSSスタイルを新しいファイル./styles/global.css
3. プロジェクトルートにgatsby-brower.jsを追加して、本番ビルドにスタイルシートを含めます

// gatsby-brower.js

import './src/styles/globals.css'

1. 古いキャッシュをクリーンアップし、フォルダを構築しますrm -rf .cache && rm -rf public
2. gatsby build -> gatsby serve
3. Voilá💁‍♂️

ノート

• 上記の問題の多くは、 https：//github.com/gatsbyjs/gatsby/issues/11072に記載されている（グローバル）スタイルとCSSコード分割の問題を挿入する珍しい方法が原因であると思われ
• おそらく、上記の解決策の回避策は、特定のユースケースの修正です。
• ギャツビーのスタイリングに関するこのチュートリアルは、私がそれを解決するのに役立ちました

これは苛立たしい問題です。

私にとって、 react-pose 、つまりgatsby-browser.jsとgatsby-ssr.js行われたアニメーションは、ページが2回目の更新で機能する、奇妙なブードゥー教の処理、二重レンダリング、および不確定なcssの処理を行っていました。

私はまだ正確な問題を指摘することはできませんが、プラグインを調べて最終的には削除し、ライブラリを削除して、それを_解決しました_。

Gatsbyは、他のJSツールと並んで、素晴らしく派手なものになる可能性がありますが、本番環境での使用には注意して責任を負います。

新しい複製を共有することは可能ですか？ css-in-jsを使用する場合、それは私たちのせいではないため、修正できない可能性があるためです。

私もこの問題に遭遇しました。

数日前にtypography.jsを追加しました。 次に、 typography.js基づくスタイルがgatsby developで正常に機能することに気付きましたが、 gatsby buildでは使用できません。 スターターテンプレートからアプリを作成しました。

バージョンをアップグレードしようとしましたが、機能しません。
次に、 layout.cssがあることがわかりました

私の解決策はlayout.cssにコメントすることで、この問題は修正されているようです

typography.jsを追加した後のプロジェクト
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

layout.cssコメントアウトした後のプロジェクト
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

@Jasonlhyこれはまさに私にとっての問題でした。 コンポーネントフォルダのlayout.jsファイルがlayout.cssファイルをインポートしています。 そのインポートを削除してnpm run buildとnpm run serve再度実行すると、サイトは問題なく表示されました。 どうもありがとうございます！

新しい複製を共有することは可能ですか？ css-in-jsを使用する場合、それは私たちのせいではないため、修正できない可能性があるためです。

こんにちは@wardpeet 、これはgatsby-plugin-styled-componentsを追加したときに私のプロジェクトでポップアップしたので、更新されたGatsbyで引き続き発生する問題の新しい複製を次に示します。

編集：スタイルを編集するにつれて問題が変化し続けるため、私はもう複製を持っていないことがわかりました。 次のコミットをデプロイした後、インポートの順序が再び変更されました。 私のCSSはdevとprodの両方で同じになりました。 添付のスクリーンショットと説明は、以前は何が起こっていたかを示しています...

説明

Gatsbyは、開発と本番で<head>注文方法が異なります。 グローバルCSSと一緒にgatsby-plugin-styled-componentsを使用すると、CSSのロード順序がdevとprodで異なり、予期しない視覚的なバグが発生する可能性があります。

これは＃9908と同じで、＃9733を支持して多数の同様の問題とともにクローズされましたが、 @ KyleAMathewsによると＃11800で修正されたため、

再現する手順

このリポジトリには、問題のライブ（ただし最小ではない）の例があります： //github.com/vivshaw/vivshaw。 このサイトには、Bulma CSSフレームワークを含むグローバルCSSのチャンクがあり、サイトの残りの部分はスタイル付きコンポーネントで実行されます。 プロダクションバージョンはnetlifyで

期待される結果

gatsby developとgatsby build gatsby serveはどちらも同じように見えるはずです。 スタイルのロード順序は一貫している必要があります。

実結果

本番用にビルドすると、正しいページスタイルが表示されます。

しかし、 gatsby developをロードすると、イントロセクションのパディングがAWOLになります。

私はいくつか掘り下げて、その理由を理解しました。 本番環境では、Gatsbyはスタイルコンポーネントスタイルの前にグローバルcssチャンクをロードします。これは、ここで強調表示されている2行で確認できます。

ただし、開発では、スタイル付きコンポーネントのスタイルが最初に読み込まれます。

なぜこれがバグを引き起こすのですか？ さて、私はBulmaクラスとstyled-componentsで生成されたクラスの両方でタグ付けされたコンポーネントを持っています。 どちらのクラスもパディングプロパティに影響を与えるため、最後にロードした方が適用されます。 この場合、Bulmaクラスを削除するだけで簡単に解決できます。 しかし、このロード順序の動作によって、より複雑な問題が発生する状況を想像することができます。

環境

> gatsby info

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
  Binaries:
    Yarn: yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 118.04s. - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.13 - /c/Python27/python
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.3.16 => 2.3.16
    gatsby-image: ^2.0.37 => 2.0.37
    gatsby-plugin-eslint: ^2.0.4 => 2.0.4
    gatsby-plugin-layout: ^1.0.14 => 1.0.14
    gatsby-plugin-manifest: ^2.0.28 => 2.0.28
    gatsby-plugin-netlify: ^2.0.13 => 2.0.13
    gatsby-plugin-netlify-cms: ^3.0.17 => 3.0.17
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.32 => 2.0.32
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-plugin-webpack-size: 0.0.3 => 0.0.3
    gatsby-source-filesystem: ^2.0.29 => 2.0.29
    gatsby-transformer-remark: ^2.3.8 => 2.3.8
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

確かに、これを修正する方法がわからないので、ヘッドコンポーネントに何らかの並べ替えを追加することをお勧めします。

@topherauyeungが上記と同じ種類の問題を見る

環境

gatsby info

  System:
    OS: macOS High Sierra 10.13.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.7.0 - /usr/local/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 66.0.2
    Safari: 11.1
  npmPackages:
    gatsby: ^2.3.24 => 2.3.27
    gatsby-image: ^2.0.39 => 2.0.40
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29
    gatsby-plugin-material-ui: ^1.2.4 => 1.2.4
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sharp: ^2.0.35 => 2.0.35
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-source-filesystem: ^2.0.29 => 2.0.31
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18
  npmGlobalPackages:
    gatsby-cli: 2.5.4

この問題もあります。 NPMライブラリからコンポーネントをプルするgatsbyリポジトリがあります。 コンポーネントは、ビルド時に間違った順序で<head>に挿入されている.scssファイルをインポートします。 開発時には、gatsbyリポジトリのスタイルが最後になるため、優先されますが、ビルド時には、最初になり、インポートされたコンポーネントのスタイルによってオーバーライドされます。

これに関連する可能性のある同様の問題があります。スタイルを動的にロードします。gatsbyでは、スタイルは現在のレイアウトに相対的です。gatsbyでは、「source.less」内のすべてのスタイルがアプリのレイアウトにも適用されます。

componentDidMount() { require("./source.less") }

この問題も見つかりました。 しかし、私の場合は単純な間違いでした。
使っていた

<Button href="/path/to/page">blah blah</Button>

Gatsby Linkを使用するように変更すると、機能します

<Link to="/path/to/page">
  <Button>blah blah</Button>
</Link>

同じ問題。 デバッグを試みている間、解決策に目を光らせています。

関連していると思うのでこれに追加しますが、最近問題になっているだけです：
私はTypography.jsとBootstrapを使用しています-本番環境では、ブートストラップはtypography.jsによって無効にされていますが、開発サーバーでは、Bootstrapフォントスタイルがタイポグラフィスタイルを上書きしています。 実際にどのように見えるかを確認するためにサイトを展開する必要があるため、これはかなり腹立たしいことです。 gatsbydevelopのtypography.jsでBootstrapを無効にする方法を誰かが知っているなら私は本当に感謝します

関連していると思うのでこれに追加しますが、最近問題になっているだけです：
私はTypography.jsとBootstrapを使用しています-本番環境では、ブートストラップはtypography.jsによって無効にされていますが、開発サーバーでは、Bootstrapフォントスタイルがタイポグラフィスタイルを上書きしています。 実際にどのように見えるかを確認するためにサイトを展開する必要があるため、これはかなり腹立たしいことです。 gatsbydevelopのtypography.jsでBootstrapを無効にする方法を誰かが知っているなら私は本当に感謝します

私が欲しかったものでBootstrapを再構築することでこれを修正しました

ここで同じ問題-https：//github.com/gatsbyjs/gatsby/issues/16075

ここで説明したのと同様の問題が発生しています。 私はCSSフレームワーク（すべてカスタム.sass）を使用していませんが、一部のスタイル、要素、およびクラスは、 gatsby developとgatsby build間で異なる方法で処理されます。

これは、 URLSearchParams(window.location.search)を使用して検索パラメータをチェックしているページで発生しています。 それで、パラメータの有無に応じて動的に要素を表示しています。 developのURLに直接アクセスすると、すべて正常に機能します。 buildでは、すべてがかなり異なる方法で処理されます。

期待される（ develop ） ：

実際（ build ） ：

条件付きロジック：

{(!!params ? !params.has('signup') : true) && (
    <div className={[ styles.form__element, styles.contact__message, ].join( ' ')}>
        <label htmlFor="message">
            Message
            <textarea required minLength="10" name="message" id="message" cols="30" rows="10" className={styles.form__control} placeholder="Questions, comments, etc..." />
        </label>
    </div>
)}

paramsはによって設定されます：

const params = typeof window !== `undefined` ? new URLSearchParams(window.location.search) : ''

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    npm: 6.10.2 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50
    gatsby-image: ^2.2.8 => 2.2.8
    gatsby-plugin-google-analytics: ^2.1.6 => 2.1.6
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
    gatsby-plugin-sass: ^2.1.4 => 2.1.4
    gatsby-plugin-sharp: ^2.2.9 => 2.2.9
    gatsby-plugin-sitemap: ^2.2.5 => 2.2.5
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-source-contentful: ^2.1.17 => 2.1.17
    gatsby-source-filesystem: ^2.1.8 => 2.1.8
    gatsby-transformer-remark: ^2.6.10 => 2.6.10
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.27

@ j-651同じ問題が発生しているようです。 ローカルストレージからデータを読み取り、クラス名を条件付きでレンダリングすると、間違ったクラス名がレンダリングされます。 回避策はありますか？

@OrKoNこの問題を回避するために私がやったことは、元の部分をコンポーネントとして使用して別のページを作成し、それが理にかなっている場合は、条件付きでレンダリングするための小道具を渡すことでした。 これが実装で機能するかどうかはわかりません。

同様の問題が発生しています。 最初に、私はスタイル設定されたコンポーネントのために異なるバージョンを持っていました。 gatsby-plugin-styled-componentsプラグインを追加し、それらを修正しました。 次に、MaterialUIが壊れ始めたので、 gatsby-plugin-material-uiを追加しましたが、まだ運がありません。 マテリアルUIは、展開時にまだ壊れています。

製造：

Dev（ローカル）

問題を再現し、リポジトリhttps://github.com/gatsbyjs/gatsby/issues/16925で特定することができました

これは適切な解決策ではありませんが、プロジェクトをドアから出すために私が一緒に行かなければならなかった簡単な修正でチャイムを鳴らしたかっただけです。

typography.jsの出力をコピーして貼り付け、.scssファイルに配置し、その後、小さなメッセージを付けて、他のすべてのものをインポートするようにしました。

typographyjs-output.scss
このファイルは無視してください。ありがとうございます。
typography.jsによって生成されたCSSを抽出し、ここに配置する必要がありました。
どうして？ ここを参照してください： https ：
本番ビルドは、SCSSとcss-in-jsをdevとは異なる順序でインポートします（常に一貫した順序であるかどうかはわかりません）。
'gatsby-plugin-typography'を削除し、そこから生成されたCSSを通常のol 'スタイルシートのようにインポートしました。
Typography.jsは最初からプロジェクトに含まれていて、問題が発生するとは思っていませんでした。
そうですね-これらのデフォルトを含めてサイトの残りの部分のスタイルを設定したので、このファイルを削除すると少し奇妙に見えます。

かなりひどい解決策ですが、バインドされている場合は機能します。

私が今気付いたのは、最初のページの読み込み時にCSSが壊れているが、ページを変更してから再びホームページに戻ると、CSSが機能するということです。 CSSが正しく表示されず、読み込みが非常に遅いのは、最初のページの読み込み時のみです。

Material-UIを使用して、gatsby.config.jsでgatsby-plugin-material-uiを二重に呼び出しました。 最初のページの読み込みにちらつきがあり、一部のスタイルが追加されないことがありました。 これで、最新のプラグインバージョンで動作し、このモジュールはgatsby.config.jsのプラグイン配列にエクスポートされます。
, { resolve: 'gatsby-plugin-material-ui', // If you want to use styled components you should change the injection order. options: { // stylesProvider: { // injectFirst: true, // }, }, }

誰かがここで解決策を見つけましたか？ ローカルは問題ありませんが、プロダクション（最初のページビュー）で間違ったスタイルが表示されます。 例えば。 コンポーネントには本番環境でjss13とjss14がありますが、これらのクラスはjss43とjss45である必要があります。 また、頭の中のスタイルの順序が異なっているのを見ていますが、解決方法がわかりません...両方のプラグインも含まれていますが、運がありません：

plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-plugin-material-ui',
];

@ocundale私にとっての修正は、スタイリングのマテリアルUIメソッドを削除することでした。 たとえば、次のコードは、本番環境にプッシュするときに問題を引き起こします。 理由はわかりませんが、これを削除してこのスタイリングをインラインcssとして配置すると、すべてが意図したとおりに機能しました。

const MyTab = styled(Tab)({
  border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
})

行うことで修正

<Tab style={{
 border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
}}>
...
</Tab>

OK、 @ Skillz4Killzに感謝します。迅速な対応に感謝します。残念なことのようですが、同じ方法を使用することにします。 乾杯！

これは適切な解決策ではありませんが、プロジェクトをドアから出すために私が一緒に行かなければならなかった簡単な修正でチャイムを鳴らしたかっただけです。

私の一時的な修正は、テンプレートcssによって上書きされないように、cssのすべての行に!importantを追加すること

@ gatsbyjs / coreこの問題は、さまざまなバリエーションでこのリポジトリ全体に何度も発生しているようです。 ＃3741＃5100＃9911＃10370＃12360＃14601＃17676＃17728（もっとたくさんあると確信しています、私はいつもそれらを発見し続けています）

これは、明確な回避策がなく、サイトに非決定論的に影響を及ぼし、非常に間接的な副作用があるため、「不可思議な方法」で現れることが多いため、重大な問題です。 同じHTML要素（特にclass属性を変更することは、_非常に_一般的なユースケースです。

＃14601で述べられていることが正しければ、これはReact16で導入された水和機能の統合に関する問題です。

開発モードの早い段階でこの問題を発見するのに役立つ＃10706がありますが、私が理解している限り、それは修正されません。

これを経験している他の人のために、私はインラインCSS / importantを使用せずになんとか修正することができました。
計画されたアプローチではなく、実際には運のように感じましたが、Material-UIをバージョン> 4にアップグレードするとともに、_gatsby-plugin-material-ui_および_gatsby-plugin-styled-components_プラグインを追加しました。問題は発生しなくなりました。

{
  resolve: 'gatsby-plugin-material-ui',
  options: {
    stylesProvider: {
      injectFirst: true,
    },
  },
},
'gatsby-plugin-styled-components',

"@material-ui/core": "^4.0.0",
"@material-ui/icons": "^4.0.0",
"@material-ui/styles": "^4.4.1",

問題の少なくとも1つのインスタンスを再現できます。

このリポジトリから新しいgatsbyサイトを作成します。これは、最初はデフォルトのスターターから複製されましhttps ：

依存関係/プラグインはほとんどありません：

$ gatsby info
  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/n/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.11.3 - ~/n/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: ^2.15.22 => 2.15.22
    gatsby-plugin-offline: ^3.0.8 => 3.0.8
  npmGlobalPackages:
    gatsby-cli: 2.7.44

このサイトには2ページとレイアウトしかありません。 レイアウトはwrapPageElementを介して2ページに自動的に追加されます（ gatsby-plugin-layoutとほぼ同じコード）。 レイアウトは、 class属性が現在の時刻に設定されているdivでページコンテンツをラップし、ページコンテンツの下にテキストとして時刻を追加します。

サイトを構築（および提供）し、インデックスに移動して開発者ツールで検査すると、ページに表示される時間がdiv classと同じではないことがわかります。属性：

2番目のページに移動すると、この動作が修正され、ページのコンテンツとclass属性の間で時間が同じになることがわかります。

同じウィンドウ内のページ間を移動し続ける限り、これは残ります。 ページを更新したり、ウィンドウで開いたりすると、不整合が発生します。 class属性の時間は、更新するたびに同じままであることに実際に気付くでしょう（キャッシュされていることを示唆しています）。 「ハードリフレッシュ」（CTRL + F5）は、ページを正しくロードします。

この問題の特定のインスタンスは、 gatsby-plugin-offline有効になっている場合にのみ発生し、 gatsby-plugin-layout 、および場合によってはwrapPageElement他の実装に直接影響します。

私がこれまでに思いついた唯一の回避策は、単にハイドレート関数をrenderに置き換えることです：

// gatsby-browser.js
const ReactDOM = require('react-dom')

export function replaceHydrateFunction() {
    return (element, container, callback) => {
        ReactDOM.render(element, container, callback)
    }
}

再び、これはの調整に問題があり、水和物のような反応させリポジトリに複数の問題で説明したように、方法https://github.com/facebook/react/issues/10591 、 https://github.com/ facebook / react / issues / 12713 、 https：//github.com/facebook/react/issues/13260。

「ハイドレーション」の背後にある全体的な目的はプレーンレンダリングよりもパフォーマンスを向上させることであるため、パフォーマンスが低下する可能性があることに注意してください。

整理整頓のため、 https：//github.com/gatsbyjs/gatsby/issues/17914を優先してこの問題をクローズします。

@eyalrothこれは私たちが解決する必要のある問題であることに同意します。 https://github.com/gatsbyjs/gatsby/issues/17914でこれについて話し合い、この下部に到達しましょう

私もこの問題を抱えています。 Gatsby開発環境は問題ありませんでしたが、問題のあるページをリロードするときにビルドされました。 classNameやインラインスタイルでさえ、特定のタグから削除されていました。 これにより、属性のないdivが残りましたが、すべての子がレンダリングされました。

ただし、ページ全体を更新するのではなく、gatsbyリンクルーターを使用してルートを変更した場合。 それは問題を修正します。

これは私を何時間も狂わせた。 私は恐ろしい修正を見つけました。おそらく良い習慣ではありませんが、今のところはうまくいきました。

しかし、（div）タグを（article）に変更しました

突然

<div>

なりました

<article class="CartSummary-module--summary--3zJVn">

ビルド時

また、ulとpreでも機能しました。

クレイジーな回避策@ stefantrinh1をありがとう-私もこのクレイジーなCSSの動作を経験してい

誰かがそれが複製されるのを見たいのであれば、私は公開リポジトリを持っており、両方のバージョンをデプロイしました：

@ stefantrinh1のarticle回避策で動作するようです
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

動作しません
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

Cookieの値に基づいてコンポーネントを条件付きで読み込もうとしたときに、同様の問題が発生しました。 もちろん、本番環境にSSRがあるため、これは機能しませんでした（ただし、開発モードで機能する理由はわかりません）。 とにかく、私がやったことは、チェックをuseEffect内にラップし、Reactがクライアントを引き継ぐ（再水和する）ときにレンダリングするコンポーネントをチェックすることです。 クラスコンポーネントにはcomponentDidMount()を使用できます。 これを実装した後、すべてが期待どおりに機能します。

私の問題は、 gatsby-browser.jsではwrapPageElementとwrapRootElementしていたが、 gatsby-ssr.jsでは使用していなかったことです。 持っていたものをgatsby-ssr.jsにコピーすると、期待どおりに動作し始めました。 @jlkiriの応答を参照してください： https ：

2020年に同じ問題。 問題を修正しますが、フルリロード時に問題が発生します。
"ギャツビー"： "^ 2.19.45"、
"react-custom-scrollbars"： "^ 4.2.1"、

emailnikolaと同じ問題があります

25729

私の場合、 gatsby-plugin-minifyがこの問題を引き起こしていたため、本番ビルドで本番ビルドのすべてのスタイルが再読み込みされました。