@ jonathan-chin क्या आप gatsby info --clipboard चलाकर प्रासंगिक पर्यावरण संबंधी जानकारी प्रदान कर सकते हैं?

इसके अलावा, मैंने देखा कि आप अपने द्वारा साझा किए गए रेपो में अपने पैकेज से Gatsby v1 का उपयोग कर रहे हैं। कृपया Gatsby v1 के लिए gatsby-cli संस्करण 1.x.x । gatsby-cli संस्करण 2.x.x 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

जब मैं अपनी वैश्विक 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/4342a715d6a1cdcb2808e5450819753be6b56a19

मुझे लगता है कि इसके लिए फिक्स # 8092 है।

@ जोनाथन-चिन क्या आप उस फिक्स की सामग्री को खींचने में सक्षम होंगे, और फिर उन परिवर्तनों के साथ प्रयास करें? नोट: यदि आपने इसे अभी तक नहीं देखा है, तो गैट्सबी के डॉक्स के कंट्रीब्यूट सेक्शन में कैसे गैट्सबी-देव-क्लाई के साथ सेट अप करने के बारे में जानकारी शामिल है, जिसे आपको इसे परखना होगा!

इसके अलावा @ jonathan-chin ऐसा लगता है जैसे आप Gatsby v1 पर हैं। क्या आप इसे ठीक करने के लिए Gatsby v2 में अपग्रेड कर पाएंगे?

@DSchau खेद है कि मुझे इसे वापस लाने में इतना समय लगा।

मौजूदा प्रोजेक्ट को v2 में माइग्रेट करना बहुत अधिक काम था। मैंने एक नया v2 स्टार्टर शुरू करने का फैसला किया और इसे टुकड़े टुकड़े करके (नकल करना और आवश्यकतानुसार संशोधित करना) किया। इस मामले में, गैट्सबी का विकास गैट्सबी बिल्ड की तुलना में मौलिक रूप से अलग आउटपुट का उत्पादन करता है:

गैट्सबी बिल्ड

गैट्सबी विकसित होती है

निर्माण और विकास पर दो समान तत्वों की सीएसएस शैलियों की तुलना करना:

निर्माण:

.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 में लेआउट घटक में लोड करता हूं। विकास में, यह उन्हें अच्छी तरह से विलय करने के लिए लगता है, लेकिन निर्माण में, यह उन्हें अनदेखा करता प्रतीत होता है? क्या इसका कारण हो सकता है?

मेरे पास बस एक import '../scss/style.scss';

@ jonathan-chin क्या आपने v2 के साथ यह कोशिश की या ऊपर दिए गए टिप्पणी के अनुसार @DSchau द्वारा टिप्पणी की गई?

@kakadiadarpan क्षमा करें, मेरे पास उस कार्य प्रवाह को स्थापित करने की क्षमता (अर्थात समय) नहीं है।

पीआर फिक्स को देखने के बाद, यह वही समस्या है जो मैं अनुभव कर रहा हूं। मैं इस मुद्दे को अभी के लिए बंद कर सकता हूं और पीआर की निगरानी कर सकता हूं।

@kakadiadarpan क्षमा करें, मुझे बस कुछ अजीब

जब मेरी साइट पहली बार लोड होती है, तो सीएसएस निराला होता है। लेकिन इंडेक्स पेज को फिर से लोड करने के लिए मजबूर करने पर, सीएसएस ठीक लोड होता है। यहाँ पुन: पेश करने के चरण हैं:

1) लोड https://sharemeals.org/
नीचे की ओर इमर्सन उद्धरण की जांच करें:

2) शीर्ष बाएँ साइट के नाम पर क्लिक करें। यह साइट को रीफ्रेश किए बिना इंडेक्स पेज को फिर से लोड करेगा। इमर्सन उद्धरण अपेक्षित रूप में प्रकट होता है:

(इमर्सन उद्धरण अन्य सीएसएस परिवर्तनों का संकेत है। मैं इसे केवल एक ही कह रहा हूं क्योंकि यह सबसे अधिक दिखाई देता है)

@ jonathan-chin अपडेट के लिए धन्यवाद। मैं आपके द्वारा प्रदान किए गए चरणों के साथ समस्या को पुन: उत्पन्न करने में सक्षम हूं। क्या आप https://sharemeals.org/ के लिए Gatsby v1 या v2 का उपयोग कर रहे हैं ?

~ मैं यह बिल्कुल एक ही मुद्दा रहा हूँ: ~

~ का उपयोग करते समय injectGlobal मैं चलाने के बाद diffent शैलियों हो रही है gatsby build । आप इस मुद्दे को यहां देख सकते हैं: https://ivorpad.com/about~

~ पृष्ठ समाप्त होने के बाद, लोडिंग लिंक 'लेखन' या 'कार्य' को पूरा करता है और आप शैलियों को बदलते देखेंगे। ~

शीर्ष लेख शैलियों को वैश्विक के बजाय 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

@kakadiadarpan जो "gatsby": "^1.9.277" का उपयोग कर रहा है

मुझे लगता है कि इसके लिए फिक्स # 8092 है।

@ जोनाथन-चिन क्या आप उस फिक्स की सामग्री को खींचने में सक्षम होंगे, और फिर उन परिवर्तनों के साथ प्रयास करें? नोट: यदि आपने इसे अभी तक नहीं देखा है, तो गैट्सबी के डॉक्स के कंट्रीब्यूट सेक्शन में कैसे गैट्सबी-देव-क्लाई के साथ सेट अप करने के बारे में जानकारी शामिल है, जिसे आपको इसे परखना होगा!

@ jonathan-chin क्या आप इस टिप्पणी में @DSchau द्वारा प्रदान किए गए सुझावों की कोशिश कर सकते हैं?

@kakadiadarpan मुझे लगता है कि मैंने इसे अभी लागू करने की कोशिश की। मैंने गैट्सबी-क्लि-देव स्थापित किया, कांटा और खींचा, शाखा को स्विच किया, आदि आदि।

मुद्दा अभी भी कायम है।

मैं कैसे जांच सकता हूं कि मेरे पास जो नया नोड_मॉड्यूल्स / गैट्सबी है वह सही है और पुराना नहीं है?

मैंने कुछ और जांच की है, Gatsby के साथ 1.XX और फिक्स किए बिना प्रस्तावित।

(मैंने Gatsby 2.XX को अपग्रेड करने की कोशिश की और अलग से फिक्स प्रपोज किया और न ही काम किया)

वांछित शैली के लिए jss वर्ग प्रारंभिक पगेलोड पर मौजूद है। इस मामले में .jss58 हालाँकि, मैं जिस तत्व को देख रहा हूँ वह प्रारंभिक लोड पर .jss58 नहीं है। केवल एक अन्य पृष्ठ अनुरोध करने के बाद (यहां तक ​​कि एक ही पृष्ठ का अनुरोध करने पर) तत्व सही ढंग से प्राप्त करेगा ।jss58

तो क्या लागू करने के लिए निर्धारित करने के प्रभारी के लिए क्या है? क्या कोई कारण है कि इसका प्रारंभिक लोड पर एक परिणाम होगा लेकिन बाद के सभी पेज अनुरोधों पर एक अलग लोड?

EDIT: कुछ अन्य प्रमुख मुद्दे हैं। प्रोडक्शन बिल्ड पर, मेरे svg आइकन पूरी तरह से लोड नहीं होते हैं, पेज अनुरोध की परवाह किए बिना:

यह मुझे विकास के बजाय मिलता है:

मैं उसी मुद्दे का सामना कर रहा हूं। गैट्सबी विकसित और गैट्सबी बिल्ड संस्करण मेरे लिए बहुत अलग हैं।

यदि मैं सीधे किसी पृष्ठ को सामग्री-यूआई घटकों के साथ लैंड करता हूं या रिफ्रेश करता हूं, तो सीएसएस उन घटकों के लिए टूट गया है। स्रोत में कक्षाएं मौजूद हैं, लेकिन वे तत्वों पर लागू नहीं हैं। यदि मैं उसी पृष्ठ पर <Link> का पालन करता हूं, हालांकि, सब कुछ ठीक काम करता है।

मैंने यह भी देखा है कि अगर मैं gatsby build चलता हूं, जबकि gatsby develop चल रहा है, तो gatsby develop संस्करण भी ठीक उसी तरह से व्यवहार करना शुरू करता है जैसे कि gatsby build version।

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/gatsbyss पर है

"अपेक्षित" संस्करण को देखने के लिए, नीचे की ओर स्थित किसी भी बड़े आइकन पर क्लिक करें।

मेरे पास # 8092 के लिए तय करने के लिए अभी तक समय नहीं है

मेरे पास # 8092 के लिए तय करने के लिए अभी तक समय नहीं है

इसने मेरे लिए समस्या को ठीक नहीं किया। मुझे अब भी वही व्यवहार दिखाई देता है।

अपेक्षित होना

वास्तविक

यदि मैं सीधे किसी पृष्ठ को लैंड या रिफ्रेश करता हूं ... तो सीएसएस उन घटकों के लिए टूट गया है। स्रोत में कक्षाएं मौजूद हैं, लेकिन वे तत्वों पर लागू नहीं हैं। यदि मैं उसी पृष्ठ पर <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'

आदेश को उल्टा करके मैं उस आदेश को निर्दिष्ट करने में सक्षम था जिसमें मैं html में सीएसएस आयात करना चाहता था।
तो, मेरा अंतिम कोड था

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

समाधान : आयात का क्रम बदलें
इससे मेरे लिए समस्या हल हो गई। उम्मीद है कि यह आपके साथ भी ऐसा ही हो।

मैं एक ही मुद्दे पर चल रहा हूँ, कई अन्य लोगों के बीच:

• develop nondeterministically चलता है, हालाँकि, जब यह चलता है, तो यह ठीक काम करता है।
• StaticQuery लोडिंग छवियों को समाप्त करने में विफल रहता है।
• build nondeterministically विफल रहता है, आमतौर पर छवि सामान में खराबी होती है।
• build आउटपुट develop से बहुत भिन्न होता है - यह डील ब्रेकर है।
• develop और build एक-दूसरे के साथ बातचीत करते दिखते हैं।

ये मुद्दे ऐसे खींचे हुए हैं कि वे दुर्भाग्य से मेरे लिए गैट्सबी के किसी भी लाभ की रूपरेखा तैयार करते हैं, और मुझे रीएक्ट ऐप बनाने के लिए वापस स्विच करने के लिए मजबूर करते हैं।

मैंने विभिन्न इनलाइन शैलियों की कोशिश की जैसे कि सभी इनलाइन शैलियों को निकालना और आयात करना। मूल स्तर के बजाय बाल घटकों में .css।
फिर भी यह मुद्दा कायम है। यह वास्तव में परेशान करने वाला है

मैं स्टाइल घटकों का उपयोग कर रहा हूँ, gatsby-plugin-styled-components को gatsby-config.js जोड़ना मेरे लिए काम कर रहा है।

एक ही मुद्दा रहा।
गैट्सबी बिल्ड अलग-अलग वर्ग के नाम पर लागू होता है लेकिन मैं रिएक्ट इंस्पेक्टर उचित वर्ग में आवेदन कर सकता हूं।

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 दिन हो गए हैं।

यदि हम इस मुद्दे को याद करते हैं या यदि आप इसे खुला रखना चाहते हैं, तो कृपया यहाँ उत्तर दें। आप इस मुद्दे को खुला रखने के लिए "नहीं बासी" लेबल भी जोड़ सकते हैं!

गैट्सबी समुदाय का हिस्सा बनने के लिए धन्यवाद! 💪💜

कृपया खुले रहें।

समस्या अभी भी हल नहीं हुई है। कृपया थोड़ा खुला रहें

  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 में बताया गया है कि समस्या का समाधान 7058a256d2dcfab91259bdf00e8113757374147 पर किया जाना चाहिए।

केवल मेरे विशिष्ट उपयोग के मामले में @emotion/global का उपयोग एप्लिकेशन में वैश्विक स्टाइल डालने के लिए किया गया था। किसी तरह कोड-विभाजन के मुद्दे अभी भी @emotion/global फंक्शंस के साथ संयोजन में बने रहे।

समाधान फिक्स

मुद्दों को हल करने के लिए निम्नलिखित कदम उठाए गए थे। एक सही समाधान नहीं है लेकिन इस सेटअप में काम किया है।

1. नवीनतम गैट्सबी को अपडेट करें ^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á 💁il♂️

टिप्पणियाँ

• मुझे लगता है कि उपरोक्त मुद्दों के बहुत सारे कारण (वैश्विक) शैलियों को डालने के असामान्य तरीकों के कारण हैं। https://github.com/gatsbyjs/gatsby/issues/11072 में उल्लिखित वीएस सीएसएस कोड-विभाजन के मुद्दे
• संभवतः उपरोक्त समाधान वर्कअराउंड एक विशिष्ट उपयोग-केस फिक्स है।
• गैट्सबी में स्टाइल पर इस ट्यूटोरियल ने मुझे इसे हल करने में मदद की

यह निराशाजनक मुद्दा है।

मेरे लिए, react-pose gatsby-browser.js और gatsby-ssr.js साथ किए गए एनिमेशन कुछ अजीब वूडू सामान, डबल रेंडरिंग और कुछ अनिर्धारित सीएसएस सामान जहां पेज एक दूसरे रिफ्रेश पर काम करेंगे।

मैं अभी भी सटीक समस्या को इंगित नहीं कर सकता, लेकिन निरीक्षण करना और अंततः प्लगइन्स को नीचे करना, पुस्तकालयों को हटाना, _solved_ it।

जबकि अन्य जेएस टूल्स के साथ, गैट्सबी, भयानक और आकर्षक हो सकता है, उत्पादन में इसका उपयोग करने के बारे में (नहीं) सावधान और जिम्मेदार हो सकता है।

क्या नया प्रजनन साझा करना संभव है? क्योंकि css-in-js का उपयोग करते समय यह कुछ ऐसा हो सकता है जिसे हम ठीक नहीं कर सकते क्योंकि यह हमारी गलती नहीं है।

मुझे भी इस मुद्दे का सामना करना पड़ा।

मैंने कुछ दिनों पहले typography.js जोड़ा था। तब मैं के आधार पर शैलियों का एहसास typography.js में ठीक काम करता है gatsby develop , लेकिन वे में उपलब्ध नहीं हैं gatsby build । मैंने स्टार्टर टेम्पलेट से ऐप्स बनाए,

मैंने संस्करण को अपग्रेड करने की कोशिश की, यह काम नहीं करता है।
फिर, मैंने पाया कि एक layout.css

मेरा समाधान layout.css टिप्पणी करना है और इस मुद्दे को ठीक करना प्रतीत होता है

टाइपोग्राफी जोड़ने के बाद प्रोजेक्ट। js
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

layout.css टिप्पणी करने के बाद प्रोजेक्ट करें
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

@ जसनल्लि यह मेरे लिए बिल्कुल मुद्दा था। मेरे घटक फ़ोल्डर में layout.js फ़ाइल लेआउट आयात कर रही है। फ़ाइल फ़ाइल। एक बार जब मैंने उस आयात को हटा दिया और npm run build और npm run serve फिर से भाग गया, तो साइट ठीक-ठाक दिखाई दी। आपको बहुत - बहुत धन्यवाद!

क्या नया प्रजनन साझा करना संभव है? क्योंकि css-in-js का उपयोग करते समय यह कुछ ऐसा हो सकता है जिसे हम ठीक नहीं कर सकते क्योंकि यह हमारी गलती नहीं है।

हाय @wardpeet , यह मेरा एक प्रोजेक्ट में पॉप अप हुआ जब मैंने gatsby- प्लगइन-स्टाइल-घटकों को जोड़ा, इसलिए यहां अद्यतन Gatsby पर जारी रहने की समस्या का एक नया प्रजनन है:

संपादित करें: यह बताता है कि मेरे पास अब प्रजनन नहीं है, क्योंकि मैं अपनी शैलियों को संपादित करने के दौरान समस्या बदल रहा हूं। मेरी अगली प्रतिबद्धता को लागू करने के बाद, आयात का क्रम फिर से बदल गया। मेरा सीएसएस अब देव और ठेस दोनों में समान है। संलग्न स्क्रीनशॉट और विवरण बताते हैं कि हालांकि क्या हुआ करता था ...

विवरण

गैट्सबी विकास बनाम उत्पादन में <head> आदेश देता है। ग्लोबल सीएसएस के साथ-साथ गैट्सबी-प्लगइन-स्टाइल-घटकों का उपयोग करते समय, यह सीएसएस लोड ऑर्डर को देव और ठेस के बीच अंतर करने का कारण बन सकता है, जिससे अप्रत्याशित दृश्य कीड़े हो सकते हैं।

यह # 9908 के समान है, जो # 9733 के पक्ष में समान मुद्दों के एक समूह के साथ बंद था, जो बदले में बंद था क्योंकि @KyleAMathews के अनुसार यह # 11800 में तय किया गया था। हालाँकि, मुझे अभी भी Gatsby अपडेट होने के बाद # 9908 से व्यवहार दिखाई देता है।

प्रजनन करने कि प्रक्रिया

मेरे पास इस रेपो में समस्या का एक लाइव (लेकिन गैर-न्यूनतम) उदाहरण है: https://github.com/vivshaw/vivww। इस साइट में Bulma CSS फ्रेमवर्क सहित वैश्विक CSS का एक हिस्सा है, फिर साइट के बाकी हिस्सों को स्टाइल में किया जाता है। उत्पादन संस्करण netlify पर लाइव है ।

अपेक्षित परिणाम

दोनों gatsby develop और gatsby build gatsby serve समान दिखना चाहिए। स्टाइल लोड ऑर्डर सुसंगत होना चाहिए।

वास्तविक परिणाम

जब हम उत्पादन के लिए निर्मित होते हैं, तो हम सही पेज स्टाइल देखते हैं:

लेकिन जब हम इसे gatsby develop साथ लोड करते हैं, तो इंट्रो सेक्शन में पैडिंग AWOL हो गई है:

मैंने कुछ खुदाई की, और पता लगाया कि क्यों। उत्पादन में, गैट्सबी स्टाइल-घटक शैलियों से पहले वैश्विक सीएसएस चंक को लोड करता है, जैसा कि यहां दो हाइलाइट लाइनों के साथ दिखाई देता है:

लेकिन विकसित होने में, स्टाइल वाले घटक शैली पहले लोड होती हैं:

यह एक बग का कारण क्यों बनता है? खैर, मेरे पास एक 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

इस मुद्दे के साथ भी। हमारे पास एक गैट्सबी रेपो है जो एनपीएम लाइब्रेरी से घटकों को खींचता है। घटक .scss फ़ाइलों का आयात करते हैं, जो निर्माण पर गलत क्रम में <head> इंजेक्ट किए जा रहे हैं। विकसित होने पर, गैट्सबी रेपो की शैलियाँ अंतिम रूप से आ जाती हैं, इसलिए वे पूर्वता ले लेते हैं, लेकिन निर्माण पर वे पहले आते हैं और आयातित घटक की शैलियों द्वारा अधिभूत हो रहे हैं।

मुझे इसी तरह की समस्या है शायद इससे संबंधित, मैं शैलियों को भारता से लोड करता हूं, गैट्सबी विकसित करने पर शैलियों वर्तमान लेआउट के सापेक्ष हैं, गैट्सबी पर सभी शैलियों का निर्माण 'source.less' के अंदर ऐप लेआउट पर भी किया जाता है

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

यह मुद्दा भी मिला। लेकिन मेरा मामला एक साधारण गलती थी।
मैं उपयोग कर रहा था

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

जब मैंने गैट्सबी लिंक का उपयोग करने के लिए बदल दिया, तो यह काम करता है

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

एक ही समस्या है। जब मैं डिबग करने का प्रयास करता हूं, तो एक समाधान पर नजर रखता हूं।

इसे जोड़ना क्योंकि मुझे लगता है कि यह संबंधित है, लेकिन केवल हाल ही में एक मुद्दा रहा है:
मैं टाइपोग्राफी.जेएस के साथ-साथ बूटस्ट्रैप का उपयोग कर रहा हूं - उत्पादन में बूटस्ट्रैप को टाइपोग्राफी.जेएस द्वारा अधिलेखित किया जाता है, जो कि मैं चाहता हूं, लेकिन देव सर्वर पर बूटस्ट्रैप फ़ॉन्ट शैलियाँ मेरी टाइपोग्राफी शैलियों को ओवरराइड कर रही हैं। यह बहुत ही रोमांचक है क्योंकि मुझे यह देखने के लिए साइट को तैनात करना होगा कि यह वास्तव में कैसा दिखता है। अगर किसी को पता है कि मैं कैसे टाइपोग्राफी के साथ बूटस्ट्रैप पर काबू पा सकता हूं। तो gatsby के विकास के साथ मैं वास्तव में इसकी सराहना करूंगा

इसे जोड़ना क्योंकि मुझे लगता है कि यह संबंधित है, लेकिन केवल हाल ही में एक मुद्दा रहा है:
मैं टाइपोग्राफी.जेएस के साथ-साथ बूटस्ट्रैप का उपयोग कर रहा हूं - उत्पादन में बूटस्ट्रैप को टाइपोग्राफी.जेएस द्वारा अधिलेखित किया जाता है, जो कि मैं चाहता हूं, लेकिन देव सर्वर पर बूटस्ट्रैप फ़ॉन्ट शैलियाँ मेरी टाइपोग्राफी शैलियों को ओवरराइड कर रही हैं। यह बहुत ही रोमांचक है क्योंकि मुझे यह देखने के लिए साइट को तैनात करना होगा कि यह वास्तव में कैसा दिखता है। अगर किसी को पता है कि मैं कैसे टाइपोग्राफी के साथ बूटस्ट्रैप पर काबू पा सकता हूं। तो gatsby के विकास के साथ मैं वास्तव में इसकी सराहना करूंगा

बस बूटस्ट्रैप के पुनर्निर्माण के द्वारा इसे तय किया जो मुझे चाहिए था

वही मुद्दा यहाँ - 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 प्लगइन जोड़ा और उन लोगों ने खुद को ठीक किया। फिर मैंने देखा कि मैटेरियली टूटने लगी है इसलिए मैंने gatsby-plugin-material-ui जोड़ा और फिर भी किस्मत नहीं। सामग्री UI तैनाती पर अभी भी टूटी हुई है।

उत्पादन:

देव (स्थानीय)

मैं अपने मुद्दे को पुन: उत्पन्न करने और रेपो में अलग करने में सक्षम था https://github.com/gatsbyjs/gatsby/issues/16925 यह लिंक घटक के व्यवहार से संबंधित है और शायद यह एक अलग मुद्दा है

यह एक उचित समाधान नहीं है, लेकिन बस एक त्वरित फिक्स के साथ झंकार करना चाहता था मुझे दरवाजे से बाहर एक परियोजना प्राप्त करने के लिए जाना था।

मैंने टाइपोग्राफी.जेएस के आउटपुट को कॉपी और पेस्ट किया, इसे एक .scss फ़ाइल में रखा, और थोड़े से संदेश के साथ इसे बाद में और सब कुछ आयात करना सुनिश्चित किया।

typographyjs-output.scss
कृपया इस फ़ाइल को अनदेखा करें और धन्यवाद!
मुझे टाइपोग्राफी.जेएस द्वारा उत्पन्न सीएसएस को निकालना था और इसे यहां रखना था।
क्यों? यहां देखें: https://github.com/gatsbyjs/gatsby/issues/8560
उत्पादन देव से एक अलग क्रम में एससीएसएस और सीएसएस-इन-जेएस का निर्माण करता है (यकीन है कि अगर यह हमेशा एक सुसंगत आदेश है)।
मैंने 'गैट्सबी-प्लगइन-टाइपोग्राफी' को हटा दिया और सीएसएस को नियमित ओएल 'स्टाइलशीट की तरह उत्पन्न किया गया।
टाइपोग्राफी.जेएस को शुरू से ही परियोजना में शामिल किया गया था और मुझे उम्मीद नहीं थी कि यह किसी भी मुद्दे का कारण बनेगा।
तो हाँ - मैं इन डिफ़ॉल्ट के साथ साइट के बाकी स्टाइल को शामिल किया जा रहा है, इसलिए इस फ़ाइल को हटाने से चीजें थोड़ी अजीब लगती हैं।

बहुत भयानक समाधान लेकिन यह काम करता है अगर आप एक बाँध में हैं।

मुझे अभी कुछ पता चला है कि प्रारंभिक पेज लोड होने पर CSS टूट जाती है लेकिन पेज को बदल देते हैं और फिर होम पेज पर वापस जाते हैं और CSS काम करता है। यह केवल प्रारंभिक पृष्ठ लोड पर है कि सीएसएस सही नहीं दिखता है और काफी धीमी गति से लोड होता है

सामग्री-यूआई के साथ मुझे 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 मेरे लिए, स्टाइल की सामग्री-यूआई विधि को हटाने के लिए फिक्स था। उदाहरण के लिए, उत्पादन को आगे बढ़ाते समय निम्न कोड समस्याएँ पैदा करेगा। मुझे पता नहीं क्यों, लेकिन एक बार मैंने इसे हटा दिया और इस स्टाइल को इनलाइन सीएसएस के रूप में रख दिया, सब कुछ इरादा के अनुसार काम किया।

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>

ठीक है, धन्यवाद @ Skillz4Killz , त्वरित प्रतिक्रिया की सराहना करते हैं, एक शर्म की बात लगती है, लेकिन मुझे लगता है कि मैं उसी पद्धति का उपयोग करने का सहारा लूंगा। चीयर्स!

यह एक उचित समाधान नहीं है, लेकिन बस एक त्वरित फिक्स के साथ झंकार करना चाहता था मुझे दरवाजे से बाहर एक परियोजना प्राप्त करने के लिए जाना था।

मेरा अस्थायी फिक्स मेरी सीएसएस में हर लाइन में !important जोड़ रहा था ताकि यह टेम्पलेट सीएसएस द्वारा ओवरराइड न हो जाए। क्रूर।

@ gatsbyjs / core यह मुद्दा इस रिपॉजिटरी टाइम और टाइम को फिर से अलग-अलग वैरायटी में पॉप अप करने के लिए लगता है। # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (मुझे यकीन है कि और भी हैं, मैं हर समय उनकी खोज करता रहता हूं)

यह एक गंभीर समस्या है, क्योंकि इसका कोई स्पष्ट हल नहीं है, यह गैर-नियतात्मक रूप से साइटों को प्रभावित करता है, और अक्सर "रहस्यमय तरीके" से प्रकट होता है क्योंकि इसके कुछ बहुत ही अप्रत्यक्ष दुष्प्रभाव हैं। एक ही HTML तत्व की विशेषताओं को बदलना - विशेष रूप से class - एक _very_ सामान्य उपयोग-मामला है।

अगर # 14601 में जो कहा गया है वह सही है, तो यह एक समस्या है जो रिएक्ट 16 में शुरू किए गए हाइड्रेशन फ़ंक्शन के समेकन के साथ है।

# 10706 है जो केवल इस समस्या को पहले विकसित मोड में खोजने में मदद करता है, लेकिन यह इसे ठीक नहीं करता है, जहां तक ​​मैं समझता हूं।

किसी और को यह अनुभव करने के लिए, मैं इनलाइन CSS / महत्वपूर्ण का उपयोग किए बिना ठीक करने में कामयाब रहा।
नियोजित दृष्टिकोण नहीं है और वास्तव में भाग्य की तरह अधिक महसूस किया, लेकिन मैंने _gatsby-plugin-material-ui_ और _gatsby-plugin-styled-Components_ plugins को एक साथ जोड़ा सामग्री-UI को संस्करणों> 4 में अपग्रेड करने के साथ और मुझे अब मुद्दे नहीं दिखते हैं।

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

मैं समस्या को पुन: उत्पन्न करने में सक्षम हूं, कम से कम इसका एक उदाहरण।

इस रिपॉजिटरी से एक नया गैट्सबी साइट बनाएं, जिसे शुरू में डिफ़ॉल्ट स्टार्टर से क्लोन किया गया था: https://github.com/eyalroth/gatsby-hydrate-bug

इसकी बमुश्किल कोई निर्भरता / प्लगइन्स है:

$ 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 के रूप में बहुत ही कोड)। लेआउट पृष्ठ सामग्री को div साथ लपेटता है, जिसमें class विशेषता वर्तमान समय पर सेट है, जबकि पृष्ठ सामग्री के नीचे पाठ के रूप में समय भी जोड़ रहा है।

साइट को बनाने (और परोसने) पर, इंडेक्स में नेविगेट करके और डेवलपर टूल्स में इसका निरीक्षण करते हुए, कोई यह देख सकता है कि पृष्ठ में प्रदर्शित समय div class विशेषता:

दूसरे पृष्ठ पर नेविगेट करने से यह व्यवहार ठीक हो जाएगा, और आप देखेंगे कि समय पृष्ठ सामग्री और class विशेषता के बीच समान होगा:

यह तब तक रहेगा जब तक आप एक ही विंडो में पृष्ठों के बीच नेविगेट करते रहेंगे। यदि आप पृष्ठ को ताज़ा करते हैं या इसे एक विंडो में खोलते हैं, तो असंगति वापस आ जाएगी; आप वास्तव में देखेंगे कि class विशेषता में समय हर बार आपके द्वारा ताज़ा किए जाने पर संकेत देता है (यह संकेत दिया जाता है कि यह कैश्ड है)। "हार्ड रिफ्रेश" (CTRL + F5) पेज को ठीक से लोड करेगा।

समस्या का यह विशेष उदाहरण केवल gatsby-plugin-offline सक्षम के साथ होता है, और यह सीधे gatsby-plugin-layout को प्रभावित कर रहा है, और संभवतः wrapPageElement किसी भी अन्य कार्यान्वयन को प्रभावित करता है।

केवल वर्कअराउंड मैं अभी तक के साथ आने में सक्षम है बस प्रस्तुत करने के साथ हाइड्रेट फ़ंक्शन को बदलना है :

// 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/ फेसबुक / प्रतिक्रिया / मुद्दे / 12713 , https://github.com/facebook/react/issues/13260।

ध्यान दें कि यह एक प्रदर्शन दंड पेश कर सकता है, क्योंकि "हाइड्रेशन" के पीछे का पूरा उद्देश्य सादे रेंडरिंग पर प्रदर्शन को बढ़ाना है।

हम चीजों को व्यवस्थित रखने के लिए इस मुद्दे को https://github.com/gatsbyjs/gatsby/issues/17914 के पक्ष में बंद कर रहे हैं।

@eyalroth मैं मानता हूं कि यह _indeed_ एक मुद्दा है जिसे हमें हल करने की आवश्यकता है। आइए इस बारे में https://github.com/gatsbyjs/gatsby/issues/17914 पर चर्चा जाएं

मुझे भी यह मुद्दा मिला। गैट्सबी विकसित पर्यावरण ठीक था, लेकिन निर्माण में समस्या पृष्ठ को फिर से लोड करते समय। क्लासनेम और यहां तक ​​कि इनलाइन शैली को कुछ टैग से हटा दिया जा रहा था। जिसने मुझे बिना किसी विशेषता के एक div के साथ छोड़ दिया लेकिन सभी बच्चों को प्रदान किया गया।

हालांकि जब मैंने फुल पेज रिफ्रेश करने के बजाए गैट्सबी लिंक राउटर का उपयोग करके रूट बदल दिया। यह समस्या को हल करता है।

इसने मुझे पागल कर दिया। मुझे एक भयावह नियत मिली, शायद यह एक अच्छा अभ्यास नहीं था, लेकिन इसने अभी के लिए काम किया।

लेकिन मैंने (div) टैग को (लेख) में बदल दिया

अचानक

<div>

बन गया

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

निर्माण पर

इसने उल और प्री के साथ भी काम किया।

पागल वर्कअराउंड @ stefantrinh1 के लिए धन्यवाद - मैं भी इस पागल सीएसएस व्यवहार का अनुभव कर रहा हूं

अगर कोई इसे दोहराया देखना चाहता है, मेरे पास एक सार्वजनिक रेपो है और दोनों संस्करणों को तैनात किया है:

@ stefantrinh1 के article वर्कअराउंड के साथ काम करने लगता है
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

काम नहीं करता
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

सशर्त रूप से कुकी मूल्य के आधार पर एक घटक को लोड करने की कोशिश करते समय मेरे पास समान मुद्दा था। बेशक, यह काम नहीं करता था क्योंकि आपके पास उत्पादन पर एसएसआर है (यह सुनिश्चित नहीं है कि यह देव मोड में काम क्यों करता है)। वैसे भी, मैं जो कर रहा था वह useEffect अंदर मेरे चेक को लपेट रहा है और क्लाइंट पर एक बार रिएक्ट (रिहाइड्रेट) लेने के लिए कौन से घटक को प्रस्तुत करना है। आप वर्ग घटकों के लिए componentDidMount() उपयोग कर सकते हैं। इसके लागू होने के बाद, सब कुछ उम्मीद के मुताबिक काम करता है।

मेरी समस्या यह थी कि मैं wrapPageElement और wrapRootElement gatsby-browser.js का उपयोग कर रहा था लेकिन gatsby-ssr.js । एक बार जब मैंने कॉपी किया तो मेरे पास gatsby-ssr.js चीजें थीं जो कि उम्मीद के मुताबिक काम करने लगीं। कृपया @jlkiri की प्रतिक्रिया देखें: https://github.com/gatsbyjs/gatsby/issues/22113#issuecomment -597432337

2020 में एक ही मुद्दा समस्या को हल करता है, लेकिन पूर्ण पुनः लोड समस्या पर मौजूद है।
"गैट्सबी": "^ 2.19.45",
"प्रतिक्रिया-कस्टम-स्क्रॉलबार": "^ 4.2.1",

मुझे ईमेलनिकोला जैसी ही समस्या है

25,729

मेरे मामले में, gatsby-plugin-minify इस समस्या को बना रहा था, जिसके कारण उत्पादन बिल्ड में सभी शैलियों को फिर से लोड करना पड़ा।