@ jonathan-chin هل يمكنك رجاء تقديم معلومات البيئة ذات الصلة بتشغيل gatsby info --clipboard ؟

أيضًا ، لاحظت أنك تستخدم Gatsby v1 من package.json في الريبو الذي شاركته. الرجاء استخدام gatsby-cli version 1.x.x لـ Gatsby v1. gatsby-cli version 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 أفهم أنك تواجه مشكلة CSS مع إصدار gatsby-cli 1.9.x ، لكن هذا هو الإصدار الذي يجب أن تستخدمه لأنه متوافق مع إصدار Gatsby الذي تستخدمه.

شكرا لتقاسم الريبو الاستنساخ. سألقي نظرة على ذلك.

@ jonathan-chin هل من الممكن أن تعرف أي CSS يختلف تمامًا في التطوير مقابل البناء؟

kakadiadarpan
هذا من تطوير وهو التصميم المتوقع

هذا ما أحصل عليه من البناء:

يمكنك أن ترى أن فئات CSS الخاصة بهم مختلفة.

لا أذكر أن هذه كانت مشكلة من قبل. آخر بنية جيدة (حيث لم تتأثر CSS) كانت https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

أعتقد أن الإصلاح لهذا هو # 8092.

@ jonathan-chin هل ستكون قادرًا على سحب محتويات هذا الإصلاح ، ثم محاولة إجراء تلك التغييرات؟ ملاحظة: إذا لم تكن قد شاهدته بعد ، فإن قسم " كيفية المساهمة" في مستندات Gatsby يحتوي على معلومات حول كيفية الإعداد مع gatsby-dev-cli ، والتي ستحتاج إلى اختبارها!

أيضًا @ jonathan-chin يبدو أنك تستخدم Gatsby v1. هل ستكون قادرًا على الترقية إلى Gatsby v2 للحصول على هذا الإصلاح؟

DSchau آسف لقد استغرق الأمر وقتًا طويلاً للعودة إلى هذا.

كان ترحيل المشروع الحالي إلى الإصدار 2 يتطلب الكثير من العمل. قررت أن أبدأ إصدار جديد من الإصدار 2 وترحيله قطعة قطعة (نسخه وتعديله حسب الحاجة). في هذه الحالة ، ينتج تطوير gatsby مخرجات مختلفة جذريًا عن بناء gatsby:

بناء غاتسبي

غاتسبي

مقارنة أنماط 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;
}

لدي بعض تجاوز واجهة المستخدم المادية scss التي أقوم بتحميلها في مكون التخطيط في الإصدار 2. في التطوير ، يبدو أنه يدمجهم جيدًا ولكن في البناء ، يبدو أنه يتجاهلهم؟ هل يمكن أن يكون هذا هو السبب؟

لدي فقط import '../scss/style.scss';

@ jonathan-chin هل جربت هذا مع v2 أو حسب الخطوات المذكورة في التعليق من DSchau أعلاه؟

kakadiadarpan معذرة ، ليس لدي القدرة (أي الوقت) لإعداد تدفق العمل هذا.

بعد النظر في إصلاح العلاقات العامة ، يبدو أنها نفس المشكلة التي أواجهها. يمكنني إغلاق هذه المشكلة في الوقت الحالي ومراقبة العلاقات العامة.

kakadiadarpan آسف ، لقد أدركت للتو شيئًا غريبًا.

عندما يتم تحميل موقعي لأول مرة ، يكون CSS أحمق. ولكن بإجبارها على إعادة تحميل صفحة الفهرس ، يتم تحميل CSS بشكل جيد. فيما يلي خطوات إعادة الإنتاج:

1) تحميل https://sharemeals.org/
افحص اقتباس emerson نحو الأسفل:

2) انقر فوق اسم الموقع الأيسر العلوي. سيعيد تحميل صفحة الفهرس دون تحديث الموقع. يظهر اقتباس إيمرسون كما هو متوقع:

(اقتباس emerson يدل على تغييرات أخرى في CSS. أنا أستدعي هذا فقط لأنه الأكثر وضوحًا)

@ jonathan-chin شكرا لك على التحديث. يمكنني إعادة إظهار المشكلة بالخطوات التي قدمتها. هل تستخدم Gatsby v1 أو v2 لـ https://sharemeals.org/؟

~ أواجه نفس المشكلة بالضبط: ~

~ عند استخدام injectGlobal أحصل على أنماط مختلفة بعد تشغيل 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 هل ستكون قادرًا على سحب محتويات هذا الإصلاح ، ثم محاولة إجراء تلك التغييرات؟ ملاحظة: إذا لم تكن قد شاهدته بعد ، فإن قسم " كيفية المساهمة" في مستندات 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 التي يجب تطبيقها؟ هل هناك سبب لوجود نتيجة واحدة عند التحميل الأولي ولكن تحميل مختلف في جميع طلبات الصفحة اللاحقة؟

تحرير: هناك بعض القضايا الرئيسية الأخرى. عند إنشاء الإنتاج ، لا يتم تحميل رموز svg بالكامل ، بغض النظر عن طلب الصفحة:

هذا ما أحصل عليه بدلاً من ذلك عند تطويره:

أواجه نفس المشكلة. تختلف إصدارات تطوير gatsby و gatsby بشكل كبير بالنسبة لي.

إذا هبطت مباشرةً أو قمت بتحديث صفحة بمكونات واجهة المستخدم المادية ، فسيتم تعطيل CSS لتلك المكونات. الفئات موجودة في المصدر لكنها لا تنطبق على العناصر. إذا تابعت <Link> لنفس الصفحة ، فكل شيء يعمل بشكل جيد.

لقد لاحظت أيضًا أنه إذا قمت بتشغيل gatsby build أثناء تشغيل gatsby develop ، فإن إصدار تطوير gatsby يبدأ أيضًا في التصرف بنفس الطريقة تمامًا مثل إصدار إصدار 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

(لم أستخدم 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 React App.

لقد جربت طرقًا مختلفة مثل إزالة جميع الأنماط المضمنة واستيراد ملفات .scs في المكونات الفرعية بدلاً من مستوى الجذر.
لا تزال المشكلة قائمة. هذا حقا مقلق

أنا أستخدم مكونات ذات نمط ، إضافة gatsby-plugin-styled-components في gatsby-config.js عملت معي.

تواجه نفس المشكلة.
يطبق Gatsby build اسمًا مختلفًا للفئة ولكن يمكنني أن أرى في React inspector تطبيق الفئة المناسبة.

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. فويلا 💁‍♂️

ملاحظات

• أظن أن الكثير من المشكلات المذكورة أعلاه ناتجة عن طرق غير شائعة لإدخال أنماط (عالمية) ، ومشكلات تقسيم رمز CSS المذكورة في https://github.com/gatsbyjs/gatsby/issues/11072
• ربما يكون الحل البديل أعلاه هو إصلاح حالة استخدام محدد.
• ساعدني هذا البرنامج التعليمي حول التصميم في Gatsby في حلها

هذه قضية محبطة.

بالنسبة لي ، الرسوم المتحركة التي تم إجراؤها باستخدام react-pose بالتحديد في gatsby-browser.js و gatsby-ssr.js كانت تقوم ببعض الأشياء الغريبة عن الفودو ، والعرض المزدوج وبعض عناصر 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 ، لقد

تحرير: تبين أنه ليس لدي استنساخ بعد الآن ، لأن المشكلة تتغير باستمرار أثناء تعديل الأنماط الخاصة بي. بعد نشر الالتزام التالي ، تغير ترتيب عمليات الاستيراد مرة أخرى. أصبح CSS الخاص بي الآن هو نفسه في كل من dev و prod. توضح لقطات الشاشة المرفقة والوصف ما كان يحدث على الرغم من ...

وصف

يطلب Gatsby <head> مختلف في التطوير مقابل الإنتاج. عند استخدام مكونات على غرار gatsby-plugin جنبًا إلى جنب مع CSS العام ، يمكن أن يتسبب ذلك في اختلاف ترتيب تحميل CSS بين dev و prod ، مما يؤدي إلى أخطاء مرئية غير متوقعة.

هذا مطابق لـ # 9908 ، الذي تم إغلاقه مع عدد كبير من المشكلات المماثلة لصالح # 9733 ، والذي تم إغلاقه بدوره لأنه في KyleAMathews تم إصلاحه في # 11800. ومع ذلك ، ما زلت أرى السلوك من # 9908 بعد التأكد من تحديث Gatsby.

خطوات التكاثر

لدي مثال حي (ولكن ليس بالحد الأدنى) للمشكلة في هذا الريبو: https://github.com/vivshaw/vivshaw. يحتوي هذا الموقع على جزء كبير من CSS العالمية بما في ذلك إطار عمل Bulma CSS ، ثم يتم تنفيذ باقي الموقع في مكونات مصممة. نسخة الإنتاج مباشرة على netlify .

نتيجة متوقعة

يجب أن يبدو كل من gatsby develop و gatsby build gatsby serve متماثلين. يجب أن يكون ترتيب تحميل النمط متسقًا.

نتيجة فعلية

عند التصميم للإنتاج ، نرى التصميم الصحيح للصفحة:

ولكن عندما نقوم بتحميله بـ gatsby develop ، فإن المساحة المتروكة في قسم المقدمة تختفي:

قمت ببعض التنقيب واكتشفت السبب. في الإنتاج ، يقوم Gatsby بتحميل مقطع css العام قبل أنماط المكونات المصممة ، كما يظهر في الخطين المميزين هنا:

ولكن أثناء التطوير ، يتم تحميل أنماط المكونات المصممة أولاً:

لماذا هذا يسبب خطأ؟ حسنًا ، لقد تم وضع علامة على المكون باستخدام فئة Bulma وفئة مكونة من مكونات مصممة. تؤثر كلا الفئتين على خصائص الحشو ، لذا فإن أي حمولة أخيرة هي التي يتم تطبيقها. في هذه الحالة ، يمكن حلها بسهولة عن طريق إزالة فئة 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

وجود هذه القضية أيضا. لدينا مستودع gatsby يسحب المكونات من مكتبة NPM. تستورد المكونات ملفات .scss التي يتم حقنها في <head> بترتيب خاطئ عند الإنشاء. عند التطوير ، تأتي أنماط gatsby repo أخيرًا ، لذا فهي لها الأسبقية ، ولكن عند الإنشاء تأتي أولاً ويتم تجاوزها بواسطة أنماط المكونات المستوردة.

لدي مشكلة مماثلة ربما تتعلق بهذا ، أقوم بتحميل الأنماط ديناميكيًا ، عند تطوير 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 - في الإنتاج يتم إبطال bootstrap بواسطة typography.js وهو ما أريده ، ولكن على خادم dev ، تتجاوز أنماط خطوط Bootstrap أنماط الطباعة الخاصة بي. هذا أمر مثير للغضب لأنني يجب أن أنشر الموقع لأرى كيف يبدو حقًا. إذا كان أي شخص يعرف كيف يمكنني إلغاء Bootstrap باستخدام typography.js في تطوير gatsby ، فسأقدر ذلك حقًا

الإضافة إلى ذلك لأنني أعتقد أنها مرتبطة ، ولكنها كانت مشكلة مؤخرًا فقط:
أنا أستخدم Typography.js وكذلك Bootstrap - في الإنتاج يتم إبطال bootstrap بواسطة typography.js وهو ما أريده ، ولكن على خادم dev ، تتجاوز أنماط خطوط Bootstrap أنماط الطباعة الخاصة بي. هذا أمر مثير للغضب لأنني يجب أن أنشر الموقع لأرى كيف يبدو حقًا. إذا كان أي شخص يعرف كيف يمكنني إلغاء Bootstrap باستخدام typography.js في تطوير gatsby ، فسأقدر ذلك حقًا

تم إصلاح هذا بمجرد إعادة بناء Bootstrap بما أردت

نفس المشكلة هنا - https://github.com/gatsbyjs/gatsby/issues/16075

أواجه مشكلة مشابهة لما تم وصفه هنا. على الرغم من أنني لا أستخدم أي أطر عمل CSS (كلها .sass مخصصة) ، إلا أن بعض الأنماط والعناصر والفئات تتم معالجتها بشكل مختلف بين gatsby develop و gatsby build .

يحدث هذا في صفحة أتحقق فيها من معلمات البحث باستخدام URLSearchParams(window.location.search) . مع ذلك ، أعرض عنصرًا ديناميكيًا اعتمادًا على ما إذا كانت المعلمة موجودة أم لا. عند الانتقال مباشرة إلى عنوان URL على develop ، كل شيء يعمل بشكل جيد. على 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 ولم يحالفني الحظ حتى الآن. لا تزال واجهة المستخدم المادية معطلة عند النشر.

إنتاج:

ديف (محلي)

لقد تمكنت من إعادة إنتاج مشكلتي وعزلها في الريبو https://github.com/gatsbyjs/gatsby/issues/16925 ، إنها مرتبطة بسلوك مكون الارتباط وربما تكون مشكلة مختلفة

هذا ليس حلاً مناسبًا ولكني أردت فقط التناغم مع حل سريع كان علي أن أذهب إليه لإخراج المشروع من الباب.

قمت بنسخ ولصق إخراج typography.js ، ووضعه في ملف .scss ، وتأكدت من استيراده بعد ذلك مع كل شيء آخر ، مع القليل من الرسالة.

typographyjs-output.scss
فقط تجاهل هذا الملف من فضلك وشكرا!
اضطررت إلى استخراج CSS الذي تم إنشاؤه بواسطة typography.js ووضعه هنا.
لماذا ا؟ انظر هنا: https://github.com/gatsbyjs/gatsby/issues/8560
يستورد إصدار الإنتاج SCSS و css-in-js بترتيب مختلف عن dev (لست متأكدًا مما إذا كان ترتيبًا ثابتًا دائمًا).
لقد أزلت "طباعة gatsby-plugin-typography" ، واستوردت CSS الذي تم إنشاؤه من ذلك مثل ورقة أنماط ol العادية.
تم تضمين Typography.js في المشروع منذ البداية ولم أتوقع أن يتسبب في أي مشكلة.
حسنًا - لقد صممت بقية الموقع مع تضمين هذه الإعدادات الافتراضية ، لذا فإن إزالة هذا الملف يجعل الأمور تبدو غريبة بعض الشيء.

حل رهيب جدًا ولكنه يعمل إذا كنت في مأزق.

شيء أدركته للتو هو أنه في تحميل الصفحة الأولية ، يتم كسر CSS ولكن قم بتغيير الصفحة ثم العودة إلى الصفحة الرئيسية مرة أخرى ويعمل CSS. لا يبدو CSS صحيحًا ويتم تحميله ببطء شديد في التحميل الأولي للصفحة فقط

باستخدام Material-UI ، تلقيت مكالمة مزدوجة لـ gatsby-plugin-material-ui في gatsby.config.js. كان التحميل الأولي للصفحة وميضًا ولم تتم إضافة بعض الأنماط في بعض الأحيان. يعمل الآن مع أحدث إصدار من البرنامج المساعد ويتم تصدير هذه الوحدة النمطية في مصفوفة الملحقات من 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 بالنسبة لي ، كان الإصلاح هو إزالة طريقة تصميم واجهة المستخدم المادية. على سبيل المثال ، قد يتسبب الكود التالي في حدوث مشكلات عند الدفع إلى الإنتاج. لا أعرف لماذا ولكن بمجرد أن أزلت هذا ووضعت هذا التصميم على أنه 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>

حسنًا ، شكرًا @ Skillz4Killz ، نقدر الاستجابة السريعة ، يبدو عارًا ، لكنني أعتقد أنني سألجأ إلى استخدام نفس الطريقة بعد ذلك. في صحتك!

هذا ليس حلاً مناسبًا ولكني أردت فقط التناغم مع حل سريع كان علي أن أذهب إليه لإخراج المشروع من الباب.

كان الإصلاح المؤقت الذي أجريته هو إضافة !important إلى كل سطر في css حتى لا يتم تجاوزه بواسطة قالب css. وحشية.

@ gatsbyjs / core يبدو أن هذه المشكلة ظهرت في جميع أنحاء هذا المستودع مرارًا وتكرارًا بأشكال مختلفة. # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (أنا متأكد من أن هناك المزيد ، وأستمر في اكتشافهم طوال الوقت)

هذه مشكلة حرجة ، حيث لا يوجد حل بديل واضح لها ، وتؤثر على المواقع بشكل غير حتمي ، وغالبًا ما تظهر "بطرق غامضة" حيث أن لها بعض الآثار الجانبية غير المباشرة للغاية. تغيير سمات عنصر HTML نفسه - وخاصة class - هو حالة استخدام _very_ شائعة.

إذا كان ما قيل في # 14601 صحيحًا ، فهذه مشكلة تتعلق بتوحيد وظيفة الترطيب المقدمة في React 16.

هناك # 10706 الذي يساعد فقط في اكتشاف هذه المشكلة في وقت سابق في وضع التطوير ، لكنه لا يصلحها ، على حد علمي.

بالنسبة لأي شخص آخر يعاني من هذا ، تمكنت من الإصلاح دون استخدام CSS المضمّن / المهم.
ليس نهجًا مخططًا وشعرت بأنني محظوظ حقًا ، لكنني أضفت المكونات الإضافية _gatsby-plugin-material-ui_ و _gatsby-plugin-style-features_ جنبًا إلى جنب مع ترقية Material-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",

أنا قادر على إعادة إنتاج المشكلة ، على الأقل حالة واحدة منها.

قم بإنشاء موقع gatsby جديد من هذا المستودع ، والذي تم استنساخه في البداية من المبدئ الافتراضي : 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

يحتوي الموقع على صفحتين فقط وتخطيط. تتم إضافة التنسيق تلقائيًا إلى الصفحتين عبر wrapPageElement (تقريبًا نفس الرمز الموجود في 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)
    }
}

مرة أخرى ، هذه مشكلة في التوفيق بين طريقة الهيدرات ، كما تمت مناقشته في العديد من المشكلات في مستودع React ، مثل https://github.com/facebook/react/issues/10591 ، https://github.com/ facebook / رد فعل / قضايا / 12713 ، https://github.com/facebook/react/issues/13260.

هل لاحظ أنه قد يقدم عقوبة الأداء ، لأن الغرض الكامل من وراء "الماء" هو زيادة الأداء على العرض العادي.

نحن نغلق هذه المشكلة لصالح https://github.com/gatsbyjs/gatsby/issues/17914 للحفاظ على تنظيم الأمور.

eyalroth أوافق على أن هذه _indeed_ مشكلة نحتاج إلى حلها. دعونا نناقش هذا في https://github.com/gatsbyjs/gatsby/issues/17914 ونصل إلى الجزء السفلي من هذا

أنا أيضا حصلت على هذه المشكلة. كانت بيئة تطوير Gatsby جيدة ولكن في البناء عند إعادة تحميل صفحة المشكلة. تم تجريد نمط className وحتى أسلوب Inline من علامات معينة. الأمر الذي تركني مع div بدون أي صفات ولكن تم تقديم جميع الأطفال.

ومع ذلك ، عندما قمت بتغيير المسار باستخدام موجه ارتباط gatsby بدلاً من تحديث الصفحة بالكامل. يعمل على إصلاح المشكلة.

دفعني هذا إلى الجنون لساعات. لقد وجدت إصلاحًا مروعًا ، ربما لم يكن ممارسة جيدة ولكنه نجح في الوقت الحالي.

لكنني غيرت علامة (div) إلى (مقالة)

فجأة

<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

واجهت مشكلة مماثلة أثناء محاولتي بشكل مشروط تحميل مكون بناءً على قيمة ملف تعريف الارتباط. بالطبع ، هذا لم ينجح لأن لديك SSR في الإنتاج (لكن لست متأكدًا من سبب عمله في وضع dev). على أي حال ، ما انتهى بي الأمر هو تغليف الشيك بداخل useEffect والتحقق من المكون الذي سيتم عرضه بمجرد تولي React (إعادة الترطيب) على العميل. يمكنك استخدام 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" ،

لدي نفس مشكلة emailnikola

25729

في حالتي ، كان gatsby-plugin-minify يتسبب في هذه المشكلة ، مما أدى إلى إعادة إنشاء الإنتاج لجميع الأنماط في بنية الإنتاج.