@ jonathan-chin dapatkah Anda memberikan informasi lingkungan yang relevan dengan menjalankan gatsby info --clipboard ?

Juga, saya perhatikan bahwa Anda menggunakan Gatsby v1 dari package.json Anda di repo yang Anda bagikan. Gunakan gatsby-cli versi 1.x.x untuk Gatsby v1. gatsby-cli versi 2.x.x adalah untuk Gatsby v2

@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

ketika saya menurunkan versi gatsby-cli global saya ke 1.9.X, saya mendapatkan masalah CSS. ketika saya menyimpannya di 2.0.0-rc.1, itu memberi saya kesalahan BrowserslistError: Unknown browser query dead

@ jonathan-chin Saya memahami bahwa Anda mendapatkan masalah CSS dengan gatsby-cli versi 1.9.x , tetapi itu adalah versi yang harus Anda gunakan karena kompatibel dengan versi Gatsby yang Anda gunakan.

Terima kasih telah membagikan repo reproduksi. Saya akan lihat itu.

@ jonathan-chin apakah mungkin bagi Anda untuk mengetahui CSS mana yang benar-benar berbeda dalam develop vs build?

@kakadiadarpan
Ini dari pengembangan dan gaya yang diharapkan

ini yang saya dapatkan dari build:

Anda dapat melihat bahwa kelas CSS mereka berbeda.

Saya tidak ingat ini menjadi masalah sebelumnya. Versi bagus terakhir (di mana CSS tidak terpengaruh) adalah https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

Saya pikir perbaikan untuk ini adalah # 8092.

@ jonathan-chin dapatkah Anda menarik konten perbaikan itu ke bawah, dan kemudian mencoba dengan perubahan itu? Catatan: jika Anda belum melihatnya, bagian Bagaimana Berkontribusi dari dokumen Gatsby berisi info tentang cara menyiapkan dengan gatsby-dev-cli, yang Anda perlukan untuk mengujinya!

Juga @ jonathan-chin sepertinya Anda menggunakan Gatsby v1. Apakah Anda dapat meningkatkan ke Gatsby v2 untuk mendapatkan perbaikan ini?

@DSchau maaf butuh waktu lama untuk kembali ke ini.

memindahkan proyek yang ada ke v2 terlalu banyak pekerjaan. Saya memutuskan untuk memulai starter v2 baru dan memigrasikannya sepotong demi sepotong (menyalin dan memodifikasi sesuai kebutuhan). Dalam hal ini, gatsby develop menghasilkan keluaran yang sangat berbeda dari gatsby build:

gatsby membangun

gatsby berkembang

membandingkan gaya css dari dua elemen identik pada build dan develop:

membangun:

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

mengembangkan:

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

Saya memiliki beberapa scss utama Material UI yang saya muat ke komponen tata letak di v2. dalam pengembangan, tampaknya menggabungkan mereka dengan baik tetapi dalam membangun, tampaknya mengabaikan mereka? apakah itu penyebabnya?

Saya hanya punya import '../scss/style.scss';

@ jonathan-chin apakah Anda mencoba ini dengan v2 atau sesuai langkah yang disebutkan dalam komentar oleh @DSchau di atas?

@kakadiadarpan Maaf, saya tidak memiliki kapasitas (waktu) untuk mengatur alur kerja itu.

Setelah melihat perbaikan PR, sepertinya itu masalah yang sama yang saya alami. Saya dapat menutup masalah ini untuk saat ini dan memantau PR.

@kakadiadarpan maaf, saya baru menyadari ada yang aneh.

Saat situs saya pertama kali dimuat, CSS-nya aneh. tetapi memaksanya untuk memuat ulang halaman indeks, CSS memuat dengan baik. Berikut langkah-langkah untuk mereproduksi:

1) muat https://sharemeals.org/
periksa kutipan emerson di bagian bawah:

2) klik di kiri atas nama situs. itu akan memuat ulang halaman indeks tanpa menyegarkan situs. kutipan emerson muncul seperti yang diharapkan:

(kutipan emerson menunjukkan perubahan CSS lainnya. Saya hanya membatalkannya karena ini yang paling terlihat)

@ jonathan-chin Terima kasih atas pembaruannya. Saya dapat mereproduksi masalah tersebut dengan langkah-langkah yang Anda berikan. Apakah Anda menggunakan Gatsby v1 atau v2 untuk https://sharemeals.org/?

~ Saya mengalami masalah yang sama persis: ~

~ Saat menggunakan injectGlobal Saya mendapatkan gaya yang berbeda setelah menjalankan gatsby build . Anda dapat melihat masalahnya di sini: https://ivorpad.com/about~

~ Setelah halaman selesai memuat, arahkan kursor ke link 'Menulis' atau 'Kerja' dan Anda akan melihat gaya berubah. ~

Selesaikan dengan memindahkan gaya tajuk ke page.js bukan global.

 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

@kakadiadarpan yang menggunakan "gatsby": "^1.9.277"

Saya pikir perbaikan untuk ini adalah # 8092.

@ jonathan-chin dapatkah Anda menarik konten perbaikan itu ke bawah, dan kemudian mencoba dengan perubahan itu? Catatan: jika Anda belum melihatnya, bagian Bagaimana Berkontribusi dari dokumen Gatsby berisi info tentang cara menyiapkan dengan gatsby-dev-cli, yang Anda perlukan untuk mengujinya!

@ jonathan-chin dapatkah Anda mencoba saran yang diberikan oleh @DSchau dalam komentar ini?

@kakadiadarpan Saya rasa saya mencoba menerapkan ini sekarang. Saya menginstal gatsby-cli-dev, bercabang dan menarik, mengganti cabang, dll.

Masalahnya masih berlanjut.

Bagaimana cara memeriksa ulang apakah node_modules / gatsby baru yang saya miliki sudah benar dan bukan yang lama?

Saya telah melakukan penyelidikan lebih lanjut, dengan Gatsby 1.XX dan tanpa usulan perbaikan.

(Saya mencoba meningkatkan ke Gatsby 2.XX dan secara terpisah perbaikan yang diusulkan dan tidak ada yang berhasil)

kelas jss untuk gaya yang diinginkan memang ada di pemuatan halaman awal. dalam hal ini, .jss58. Namun, elemen yang saya lihat tidak mendapatkan .jss58 pada pemuatan awal. hanya setelah membuat permintaan halaman lain (bahkan meminta halaman yang sama) elemen akan mendapatkan .jss58 dengan benar

Jadi apa yang bertugas menentukan kelas jss apa yang akan diterapkan? adakah alasan mengapa hal itu akan memiliki satu hasil pada pemuatan awal tetapi pemuatan yang berbeda pada semua permintaan halaman berikutnya?

EDIT: ada beberapa masalah besar lainnya. pada build produksi, ikon svg saya tidak pernah dimuat sepenuhnya, terlepas dari permintaan halaman:

Inilah yang saya dapatkan sebagai gantinya kembangkan:

Saya menghadapi masalah yang sama. Versi gatsby develop dan gatsby build sangat berbeda untuk saya.

Jika saya membuka secara langsung atau menyegarkan halaman dengan komponen material-ui, CSS rusak untuk komponen tersebut. Kelas ada di sumber tetapi tidak diterapkan ke elemen. Jika saya mengikuti <Link> ke halaman yang sama, bagaimanapun, semuanya bekerja dengan baik.

Saya juga memperhatikan bahwa jika saya menjalankan gatsby build sementara gatsby develop sedang berjalan, versi gatsby develop juga mulai berperilaku persis sama dengan versi build gatsby.

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

(Saya belum pernah menggunakan gatsby-plugin-offline)

Anda dapat melihat situs webnya di http://pawanhegde.netlify.com
Sumbernya ada di https://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjs

Untuk melihat versi yang "diharapkan", klik salah satu ikon besar yang lucu di dekat bagian bawah.

Saya belum punya waktu untuk mencoba perbaikan untuk # 8092

Saya belum punya waktu untuk mencoba perbaikan untuk # 8092

Itu tidak memperbaiki masalah saya. Saya masih melihat perilaku yang sama.

Diharapkan

Sebenarnya

Jika saya membuka langsung atau menyegarkan halaman ... CSS rusak untuk komponen tersebut. Kelas ada di sumber tetapi tidak diterapkan ke elemen. Jika saya mengikuti <Link> ke halaman yang sama, bagaimanapun, semuanya bekerja dengan baik.

Ini juga terjadi persis seperti yang dijelaskan untuk saya. Saya mencoba memperbaikinya di https://github.com/gatsbyjs/gatsby/pull/8092 dan berhasil untuk sebagian besar halaman, tetapi tidak berhasil untuk semuanya.

Diharapkan:

Sebenarnya:

  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 

Saya memecahkan masalah ini dengan melakukan hal berikut
di file index.js yang saya miliki

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

dengan membalik urutan, saya dapat menentukan urutan yang saya inginkan untuk mengimpor css di html.
Jadi, kode terakhir saya adalah

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

Solusi : Ubah urutan impor
Ini memecahkan masalah saya. Mudah-mudahan hal yang sama berlaku untuk Anda.

Saya mengalami masalah yang sama, antara lain:

• develop berjalan nondeterministically, bagaimanapun, ketika itu berjalan, itu bekerja dengan baik.
• StaticQuery gagal menyelesaikan pemuatan gambar secara nondeterministically.
• build gagal nondeterministically, biasanya seg kesalahan dalam hal gambar.
• build output sangat berbeda dari develop - ini adalah pemecah kesepakatan.
• develop dan build tampaknya berinteraksi satu sama lain.

Masalah-masalah ini sangat menjengkelkan sehingga sayangnya tampaknya lebih besar daripada manfaat Gatsby bagi saya, dan memaksa saya untuk beralih kembali ke Buat Aplikasi React.

Saya mencoba berbagai solusi seperti menghapus semua gaya sebaris dan mengimpor .scss di komponen anak daripada di tingkat akar.
Masalahnya masih berlanjut. Ini sangat meresahkan

Saya menggunakan komponen bergaya, menambahkan gatsby-plugin-styled-components di gatsby-config.js berhasil untuk saya.

Mengalami masalah yang sama.
Gatsby build menerapkan nama kelas yang berbeda tetapi saya dapat melihat di kelas React inspector yang tepat sedang diterapkan.

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

Hai!

Masalah ini telah menjadi sunyi. Sepi seram. 👻

Kami mendapatkan banyak masalah, jadi saat ini kami menutup masalah setelah 30 hari tidak aktif. Sudah setidaknya 20 hari sejak pembaruan terakhir di sini.

Jika kami melewatkan masalah ini atau jika Anda ingin tetap membukanya, balas di sini. Anda juga dapat menambahkan label "tidak basi" agar masalah ini tetap terbuka!

Terima kasih telah menjadi bagian dari komunitas Gatsby! 💪💜

Tolong tetap buka.

Masalah masih belum terselesaikan. Tolong tetap terbuka sebentar

  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

Masalah masih belum terselesaikan. Tolong tetap terbuka sebentar

  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

Seperti yang dirujuk di https://github.com/gatsbyjs/gatsby/issues/11072 , masalah harus diselesaikan di 7058a256d2dcfab91259bdf00e811375737414e7.

Hanya dalam kasus penggunaan khusus saya @emotion/global digunakan untuk memasukkan gaya global ke dalam aplikasi. Entah bagaimana masalah pemecahan kode masih bertahan dalam kombinasi dengan fungsionalitas @emotion/global .

Perbaikan solusi

Langkah-langkah berikut diambil untuk mengatasi masalah tersebut. Bukan solusi sempurna tetapi berhasil dalam pengaturan ini.

1. Perbarui ke versi Gatsby terbaru ^2.1.8
2. Cari tahu di mana import { Global, css } from '@emotion/core' digunakan dan pindahkan gaya CSS ke file baru ./styles/global.css
3. Sertakan stylesheet dalam build produksi Anda dengan menambahkan gatsby-brower.js ke root proyek

// gatsby-brower.js

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

1. Bersihkan cache lama dan buat folder rm -rf .cache && rm -rf public
2. gatsby build -> gatsby serve
3. Voilá 💁‍♂️

Catatan

• Saya menduga banyak masalah di atas disebabkan oleh cara yang tidak biasa untuk memasukkan gaya (global) VS masalah pemisahan kode CSS yang disebutkan di https://github.com/gatsbyjs/gatsby/issues/11072
• Mungkin solusi solusi di atas adalah perbaikan kasus penggunaan tertentu.
• Tutorial tentang gaya di Gatsby ini membantu saya mengatasinya

Ini adalah masalah yang membuat frustrasi.

Bagi saya, animasi yang dilakukan dengan react-pose yaitu di gatsby-browser.js dan gatsby-ssr.js melakukan beberapa hal voodoo yang aneh, rendering ganda dan beberapa hal css yang tidak pasti di mana halaman akan bekerja pada penyegaran kedua.

Saya masih tidak bisa menunjukkan masalah sebenarnya, tetapi memeriksa dan akhirnya menghapus plugin, menghapus pustaka, _solved_ it.

Meskipun Gatsby, bersama dengan alat JS lainnya, dapat menjadi luar biasa dan mencolok, berhati-hatilah dan bertanggung jawab untuk (tidak) menggunakannya dalam produksi.

apakah mungkin untuk membagikan reproduksi baru? Karena saat menggunakan css-in-js mungkin ada sesuatu yang tidak bisa kami perbaiki karena itu bukan kesalahan kami.

Saya mengalami masalah ini juga.

Saya menambahkan typography.js beberapa hari yang lalu. Kemudian saya menyadari bahwa gaya berdasarkan typography.js berfungsi dengan baik di gatsby develop , tetapi tidak tersedia di gatsby build . Saya membuat aplikasi dari template awal,

Saya mencoba meningkatkan versi, tidak berhasil.
Kemudian, saya menemukan ada layout.css

Solusi saya adalah mengomentari layout.css dan tampaknya memperbaiki masalah ini

Proyek setelah menambahkan typography.js
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

Proyek setelah mengomentari layout.css
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

@Jasonlhy Inilah yang menjadi masalah bagi saya. File layout.js di folder komponen saya sedang mengimpor file layout.css. Setelah saya menghapus impor itu dan menjalankan npm run build dan npm run serve lagi, situs itu muncul dengan baik. Terima kasih banyak!

apakah mungkin untuk membagikan reproduksi baru? Karena saat menggunakan css-in-js mungkin ada sesuatu yang tidak bisa kami perbaiki karena itu bukan kesalahan kami.

Hai @wardpeet , ini baru saja muncul di proyek saya ketika saya menambahkan gatsby-plugin-styled-components, jadi inilah reproduksi baru dari masalah yang terus terjadi pada Gatsby yang diperbarui:

EDIT: Ternyata saya tidak memiliki reproduksi lagi, karena masalah terus berubah saat saya mengedit gaya saya. Setelah menerapkan komit saya berikutnya, urutan impor berubah lagi. CSS saya sekarang sama di dev dan prod. Tangkapan layar dan deskripsi terlampir menunjukkan apa yang dulu terjadi ...

Deskripsi

Gatsby memesan <head> berbeda dalam pengembangan vs. produksi. Saat menggunakan gatsby-plugin-styled-components bersama CSS global, hal ini dapat menyebabkan urutan pemuatan CSS berbeda antara dev dan prod, yang menyebabkan bug visual yang tidak terduga.

Ini identik dengan # 9908, yang ditutup bersama dengan banyak masalah serupa yang mendukung # 9733, yang pada gilirannya ditutup karena menurut @KyleAMathews itu diperbaiki di # 11800. Namun, saya masih melihat perilaku dari # 9908 setelah memastikan Gatsby diperbarui.

Langkah-langkah untuk mereproduksi

Saya memiliki contoh langsung (tetapi tidak minimal) dari masalah di repo ini: https://github.com/vivshaw/vivshaw. Situs ini memiliki potongan CSS global termasuk kerangka Bulma CSS, kemudian sisa situs ini dilakukan dalam komponen bergaya. Versi produksi tersedia di netlify .

Hasil yang diharapkan

Baik gatsby develop dan gatsby build gatsby serve harus terlihat sama. Urutan pemuatan gaya harus konsisten.

Hasil sebenarnya

Saat dibuat untuk produksi, kami melihat gaya halaman yang benar:

Tetapi ketika kita memuatnya dengan gatsby develop , padding di bagian intro telah menjadi AWOL:

Saya melakukan penggalian, dan mencari tahu mengapa. Dalam produksi, Gatsby memuat potongan css global sebelum gaya komponen bergaya, seperti yang terlihat dengan dua baris yang disorot di sini:

Namun dalam pengembangan, gaya komponen bergaya dimuat terlebih dahulu:

Mengapa ini menyebabkan bug? Nah, saya memiliki komponen yang diberi tag dengan kelas Bulma dan kelas yang dihasilkan komponen bergaya. Kedua class tersebut memengaruhi properti padding, jadi mana pun yang memuat terakhir adalah yang akan diterapkan. Dalam hal ini, itu mudah dipecahkan hanya dengan menghapus kelas Bulma. Tetapi saya dapat membayangkan situasi di mana perilaku urutan pemuatan ini menyebabkan munculnya masalah yang lebih kompleks.

Lingkungan Hidup

> 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

Terima kasih pasti, tidak yakin bagaimana kami dapat memperbaikinya, kami mungkin ingin menambahkan semacam penyortiran ke komponen kepala.

Melihat masalah yang sama seperti yang disebutkan di atas oleh @topherauyeung

Lingkungan Hidup

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

Mengalami masalah ini juga. Kami memiliki repo gatsby yang menarik komponen dari perpustakaan NPM. Komponen mengimpor file .scss yang dimasukkan ke dalam <head> dalam urutan yang salah pada pembuatan. Saat dikembangkan, gaya repo gatsby menjadi yang terakhir, jadi gaya tersebut diutamakan, tetapi pada pembuatannya akan muncul lebih dulu dan diganti oleh gaya komponen yang diimpor.

Saya punya masalah serupa mungkin terkait dengan ini, saya memuat gaya secara dinamis, pada gatsby mengembangkan gaya relatif terhadap tata letak saat ini, pada gatsby membangun semua gaya di dalam 'source.less' diterapkan ke tata letak aplikasi juga

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

Menemukan masalah ini juga. Tapi kasus saya adalah kesalahan sederhana.
Saya menggunakan

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

Saat saya mengubah untuk menggunakan Gatsby Link, ini berfungsi

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

Permasalahan yang sama. Mengawasi solusi saat saya mencoba men-debug.

Menambahkan ini karena menurut saya ini terkait, tetapi baru menjadi masalah baru-baru ini:
Saya menggunakan Typography.js dan juga Bootstrap - dalam produksi, bootstrap ditimpa oleh typography.js yang saya inginkan, tetapi di server dev gaya font Bootstrap menimpa gaya tipografi saya. Ini cukup menyebalkan karena saya harus menerapkan situs tersebut untuk melihat seperti apa sebenarnya tampilannya. Jika ada yang tahu bagaimana saya bisa mengesampingkan Bootstrap dengan typography.js di gatsby develop, saya akan sangat menghargainya

Menambahkan ini karena menurut saya ini terkait, tetapi baru menjadi masalah baru-baru ini:
Saya menggunakan Typography.js dan juga Bootstrap - dalam produksi, bootstrap ditimpa oleh typography.js yang saya inginkan, tetapi di server dev gaya font Bootstrap menimpa gaya tipografi saya. Ini cukup menyebalkan karena saya harus menerapkan situs tersebut untuk melihat seperti apa sebenarnya tampilannya. Jika ada yang tahu bagaimana saya bisa mengesampingkan Bootstrap dengan typography.js di gatsby develop, saya akan sangat menghargainya

Memperbaiki ini hanya dengan membangun kembali Bootstrap dengan apa yang saya inginkan

Masalah yang sama di sini - https://github.com/gatsbyjs/gatsby/issues/16075

Saya mengalami masalah yang mirip dengan yang dijelaskan di sini. Meskipun saya tidak menggunakan kerangka kerja CSS apa pun (semua .sass khusus), beberapa gaya, elemen, dan kelas diproses secara berbeda antara gatsby develop dan gatsby build .

Ini terjadi pada halaman di mana saya memeriksa parameter pencarian menggunakan URLSearchParams(window.location.search) . Dengan itu, saya secara dinamis menampilkan elemen tergantung pada ada atau tidaknya parameter. Saat membuka langsung ke URL di develop , semuanya berfungsi dengan baik. Pada build , semuanya ditangani dengan agak berbeda.

Diharapkan ( develop ) :

Sebenarnya ( build ) :

Logika Bersyarat :

{(!!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 disetel oleh :

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 Sepertinya saya mengalami masalah yang sama. Saya membaca data dari penyimpanan lokal dan membuat nama kelas secara kondisional, dan nama kelas yang salah diberikan. Ada solusi?

@OrKoN apa yang akhirnya saya lakukan untuk mengatasi masalah ini adalah membuat halaman terpisah menggunakan bagian asli sebagai komponen dan kemudian mengirimkan prop untuk merender secara bersyarat, jika itu masuk akal. Tidak yakin apakah ini berhasil untuk implementasi Anda.

Saya mengalami masalah serupa. Pertama, saya memiliki versi yang berbeda karena komponen yang ditata. Saya menambahkan plugin gatsby-plugin-styled-components dan itu diperbaiki sendiri. Kemudian saya perhatikan MaterialUI mulai rusak jadi saya menambahkan gatsby-plugin-material-ui dan masih belum berhasil. UI material masih rusak saat penerapan.

Produksi:

Dev (Lokal)

Saya dapat mereproduksi masalah saya dan mengisolasi dalam repo https://github.com/gatsbyjs/gatsby/issues/16925 , ini terkait dengan perilaku komponen tautan dan mungkin itu masalah yang berbeda

Ini bukan solusi yang tepat tetapi hanya ingin berbaur dengan perbaikan cepat yang harus saya lakukan untuk menyelesaikan proyek.

Saya menyalin dan menempelkan output dari typography.js, menempatkannya dalam file .scss, dan memastikan untuk mengimpornya setelah itu semuanya, dengan sedikit pesan.

typographyjs-output.scss
Abaikan saja file ini dan terima kasih!
Saya harus mengekstrak CSS yang dihasilkan oleh typography.js dan meletakkannya di sini.
Mengapa? Lihat di sini: https://github.com/gatsbyjs/gatsby/issues/8560
Build produksi mengimpor SCSS dan css-in-js dalam urutan yang berbeda dari dev (tidak yakin apakah urutannya selalu konsisten).
Saya menghapus 'gatsby-plugin-typography', dan mengimpor CSS yang dihasilkan dari itu seperti stylesheet biasa.
Typography.js disertakan dalam proyek sejak awal dan saya tidak berharap itu menimbulkan masalah apa pun.
Jadi ya - Saya memberi gaya pada sisa situs dengan default ini disertakan, jadi menghapus file ini membuat semuanya terlihat agak aneh.

Solusi yang cukup mengerikan tetapi berhasil jika Anda dalam kesulitan.

Sesuatu yang baru saya sadari adalah bahwa pada pemuatan halaman awal, CSS rusak tetapi mengubah halaman dan kemudian kembali ke halaman beranda lagi dan CSS berfungsi. Hanya pada pemuatan halaman awal saja CSS tidak terlihat benar dan juga memuat cukup lambat

Dengan Material-UI, saya memiliki panggilan ganda untuk gatsby-plugin-material-ui di gatsby.config.js. Pemuatan halaman awal mengalami pergantian tampilan dan beberapa gaya terkadang tidak ditambahkan. Sekarang berfungsi dengan versi plugin terbaru dan modul ini diekspor dalam array plugin 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, // }, }, }

Apakah ada yang menemukan solusi di sini? Saya melihat gaya yang salah pada produksi (tampilan halaman pertama), meskipun lokal baik-baik saja. Misalnya. Komponen memiliki jss13 dan jss14 saat produksi, tetapi kelas tersebut harus jss43 dan jss45. Saya juga melihat urutan gaya di kepala berbeda, tetapi bingung tentang bagaimana menyelesaikannya ... Saya memiliki kedua plugin yang disertakan juga, tetapi tidak berhasil:

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

@ocundale Bagi saya, perbaikannya adalah menghapus metode penataan material-ui. Misalnya, kode berikut akan menyebabkan masalah saat didorong ke produksi. Saya tidak tahu mengapa tetapi setelah saya menghapus ini dan menempatkan gaya ini sebagai css inline, semuanya berfungsi sebagaimana mestinya.

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

Diperbaiki dengan melakukan

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

Oke, terima kasih @ Skillz4Killz , hargai tanggapan yang cepat, tampaknya memalukan, tapi saya pikir saya akan menggunakan metode yang sama. Bersulang!

Ini bukan solusi yang tepat tetapi hanya ingin berbaur dengan perbaikan cepat yang harus saya lakukan untuk menyelesaikan proyek.

Perbaikan sementara saya menambahkan !important ke setiap baris di css saya sehingga tidak akan diganti oleh css template. Brutal.

@ gatsbyjs / core Masalah ini tampaknya bermunculan di seluruh gudang ini berkali-kali dalam variasi yang berbeda. # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (Saya yakin masih ada lagi, saya terus menemukannya setiap saat)

Ini adalah masalah KRITIS, karena tidak memiliki solusi yang jelas, mempengaruhi situs secara non-deterministik, dan sering muncul dalam "cara misterius" karena memiliki beberapa efek samping yang sangat tidak langsung. Mengubah atribut elemen HTML yang sama - terutama class - adalah kasus penggunaan umum _very_.

Jika apa yang dikatakan di # 14601 benar, maka ini adalah masalah dengan konsolidasi fungsi hidrasi yang diperkenalkan di React 16.

Ada # 10706 yang hanya membantu menemukan masalah ini lebih awal dalam mode pengembangan, tetapi tidak memperbaikinya, sejauh yang saya mengerti.

Bagi orang lain yang mengalami ini, saya berhasil memperbaikinya tanpa menggunakan inline CSS / penting.
Bukan pendekatan yang direncanakan dan benar-benar terasa lebih seperti keberuntungan, tapi saya menambahkan plugin _gatsby-plugin-material-ui_ dan _gatsby-plugin-styled-components_ bersama dengan mengupgrade Material-UI ke versi> 4 dan saya tidak lagi melihat masalahnya.

{
  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",

Saya dapat mereproduksi masalah, setidaknya satu contoh.

Buat situs gatsby baru dari repositori ini, yang awalnya digandakan dari starter default : https://github.com/eyalroth/gatsby-hydrate-bug

Ini hampir tidak memiliki dependensi / plugin:

$ 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

Situs ini hanya memiliki 2 halaman dan satu layout. Tata letak secara otomatis ditambahkan ke 2 halaman melalui wrapPageElement (hampir sama dengan kode di gatsby-plugin-layout ). Tata letak membungkus konten halaman dengan div yang memiliki atribut class disetel ke waktu saat ini, sementara juga menambahkan waktu sebagai teks di bawah konten halaman.

Setelah membangun (dan menyajikan) situs, menavigasi ke indeks dan memeriksanya di alat pengembang, orang dapat melihat bahwa waktu yang ditampilkan di halaman tidak sama dengan di div class atribut:

Menavigasi ke halaman kedua akan memperbaiki perilaku ini, dan Anda akan melihat bahwa waktunya akan sama antara konten halaman dan atribut class :

Ini akan tetap ada selama Anda terus bernavigasi di antara halaman-halaman di jendela yang sama. Jika Anda kebetulan menyegarkan halaman atau membukanya di jendela, ketidakkonsistenan akan muncul kembali; Anda benar-benar akan melihat bahwa waktu di atribut class akan tetap sama setiap kali Anda menyegarkan (menunjukkan bahwa itu di-cache). "Hard refresh" (CTRL + F5) akan memuat halaman dengan benar.

Contoh khusus dari masalah ini hanya terjadi dengan gatsby-plugin-offline diaktifkan, dan ini secara langsung mempengaruhi gatsby-plugin-layout , dan mungkin implementasi lain dari wrapPageElement .

Satu-satunya solusi yang bisa saya dapatkan sejauh ini adalah dengan mengganti fungsi hidrat dengan render :

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

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

Sekali lagi, ini adalah masalah dengan rekonsiliasi metode hidrat , seperti yang dibahas dalam beberapa masalah di repositori React, seperti https://github.com/facebook/react/issues/10591 , https://github.com/ facebook / react / issues / 12713 , https://github.com/facebook/react/issues/13260.

Perhatikan bahwa ini mungkin menyebabkan penalti kinerja, karena seluruh tujuan di balik "hidrasi" adalah untuk meningkatkan kinerja dibandingkan rendering biasa.

Kami menutup masalah ini demi https://github.com/gatsbyjs/gatsby/issues/17914 untuk menjaga semuanya tetap teratur.

@eyalroth Saya setuju bahwa ini _butuh_ masalah yang perlu kami selesaikan. Mari kita bahas ini di https://github.com/gatsbyjs/gatsby/issues/17914 dan sampai ke dasarnya

Saya juga mendapat masalah ini. lingkungan pengembangan Gatsby baik-baik saja tetapi dalam proses pembuatan saat memuat ulang halaman masalah. className dan bahkan gaya sebaris dihapus dari tag tertentu. Yang meninggalkan saya dengan div tanpa atribut tetapi semua turunan diberikan.

Namun ketika saya mengubah rute menggunakan router tautan gatsby daripada menyegarkan halaman penuh. itu memperbaiki masalah.

Ini membuatku gila selama berjam-jam. Saya menemukan perbaikan yang menghebohkan, mungkin bukan praktik yang baik tetapi berhasil untuk saat ini.

Tapi saya mengubah tag (div) menjadi (artikel)

Tiba-tiba

<div>

menjadi

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

sedang dibangun

Ini juga bekerja dengan ul dan pre.

Terima kasih atas solusi gila @ stefantrinh1 - Saya juga mengalami perilaku css yang gila ini

Jika ada yang ingin melihatnya direplikasi, saya memiliki repo publik dan telah menerapkan kedua versi:

tampaknya bekerja dengan solusi article @ stefantrinh1
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

tidak bekerja
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

Saya mengalami masalah serupa saat mencoba memuat komponen berdasarkan nilai cookie. Tentu saja, ini tidak berfungsi karena Anda memiliki SSR pada produksi (meskipun tidak yakin mengapa ini berfungsi dalam mode pengembang). Bagaimanapun, yang akhirnya saya lakukan adalah membungkus cek saya di dalam useEffect dan memeriksa komponen mana yang akan dirender setelah React mengambil alih (rehydrates) pada klien. Anda dapat menggunakan componentDidMount() untuk komponen kelas. Setelah saya menerapkan ini, semuanya berfungsi seperti yang diharapkan.

Masalah saya adalah saya menggunakan wrapPageElement dan wrapRootElement di gatsby-browser.js tetapi tidak di gatsby-ssr.js . Setelah saya menyalin apa yang saya miliki ke gatsby-ssr.js hal-hal mulai bekerja seperti yang diharapkan. Silakan lihat @jlkiri 's respon: https://github.com/gatsbyjs/gatsby/issues/22113#issuecomment -597.432.337

Masalah yang sama di tahun 2020. Mengklik memperbaiki masalah tetapi masalah muat ulang penuh muncul.
"gatsby": "^ 2.19.45",
"react-custom-scrollbars": "^ 4.2.1",

saya memiliki masalah yang sama dengan emailnikola

25729

Dalam kasus saya, gatsby-plugin-minify membuat masalah ini, yang menyebabkan build produksi memuat ulang semua gaya dalam build produksi.