@ jonathan-chin, не могли бы вы предоставить соответствующую информацию о среде, выполнив gatsby info --clipboard ?

Кроме того, я заметил, что вы используете Gatsby v1 из вашего package.json в репозитории, которым вы поделились. Пожалуйста, используйте gatsby-cli version 1.x.x для Gatsby v1. 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 Я понимаю, что у вас проблема с CSS с gatsby-cli version 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 был слишком трудоемким. Я решил запустить новый стартер v2 и переносить его по частям (копируя и изменяя при необходимости). В этом случае gatsby development производит радикально отличный от gatsby build вывод:

гэтсби билд

Гэтсби разработать

сравнение стилей 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 Извините, у меня нет возможностей (т.е. времени), чтобы настроить этот рабочий процесс.

Посмотрев на исправление PR, похоже, это та же проблема, с которой я столкнулся. Я могу пока закрыть этот выпуск и следить за PR.

@kakadiadarpan извини, я только что понял кое-что странное.

Когда мой сайт загружается впервые, CSS выглядит дурацким. но заставляя его перезагрузить страницу индекса, CSS загружается нормально. Вот шаги для воспроизведения:

1) загрузите https://sharemeals.org/
изучите цитату Эмерсона внизу:

2) нажмите на название сайта в верхнем левом углу. он перезагрузит страницу индекса без обновления сайта. цитата Эмерсона выглядит так, как ожидалось:

(цитата Эмерсона указывает на другие изменения CSS. Я вызываю это только потому, что оно наиболее заметно)

@ jonathan-chin Спасибо за обновление. Я могу воспроизвести проблему с помощью предоставленных вами шагов. Вы используете Gatsby v1 или v2 для https://sharemeals.org/?

~ У меня такая же проблема: ~

~ При использовании injectGlobal я получаю разные стили после запуска gatsby build . Вы можете увидеть проблему здесь: https://ivorpad.com/about~

~ После того, как страница загрузится, наведите указатель мыши на ссылки «Написание» или «Работа», и вы увидите, что стили меняются. ~

Решил, переместив стили заголовков на page.js вместо 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, который использует "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 development и gatsby очень разные.

Если я приземляюсь напрямую или обновляю страницу с компонентами material-ui, 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.

Я пробовал различные обходные пути, такие как удаление всех встроенных стилей и импорт .scss в дочерние компоненты, а не на корневой уровень.
Тем не менее проблема не устранена. Это действительно беспокоит

Я использую стилизованные компоненты, добавление gatsby-plugin-styled-components в gatsby-config.js у меня сработало.

Имея такую ​​же проблему.
Сборка Gatsby применяет другое имя класса, но я вижу, что в инспекторе React применяется правильный класс.

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

Привет!

Этот вопрос утих. Жуткая тишина. 👻

У нас много проблем, поэтому в настоящее время мы закрываем их после 30 дней бездействия. Прошло как минимум 20 дней с момента последнего обновления здесь.

Если мы пропустили эту проблему или вы хотите оставить ее открытой, ответьте здесь. Вы также можете добавить ярлык «не устаревший», чтобы проблема оставалась открытой!

Спасибо, что стали частью сообщества Гэтсби! 💪💜

Пожалуйста, оставайтесь открытыми.

Проблема все еще не решена. Пожалуйста, оставайся открытым ненадолго

  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. Вуаля

Ноты

• Я подозреваю, что многие из вышеперечисленных проблем вызваны необычными способами вставки (глобальных) стилей VS Проблемы с разделением кода 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 , это только что появилось в моем проекте, когда я добавил компоненты в стиле gatsby-plugin-styled, так что вот новое воспроизведение проблемы, которая продолжает возникать в обновленном Gatsby:

РЕДАКТИРОВАТЬ: Оказывается, у меня больше нет репродукции, потому что проблема продолжает меняться, когда я редактирую свои стили. После развертывания моей следующей фиксации порядок импорта снова изменился. Мой CSS теперь одинаков как для разработчиков, так и для продуктов. Приложенные скриншоты и описание показывают, что раньше происходило ...

Описание

Гэтсби заказывает <head> разному при разработке и производстве. При использовании gatsby-plugin-styled-components вместе с глобальным CSS это может привести к различию порядка загрузки CSS между разработчиками и продуктами, что приведет к неожиданным визуальным ошибкам.

Это идентично # 9908, который был закрыт вместе с множеством аналогичных проблем в пользу # 9733, который, в свою очередь, был закрыт, потому что согласно @KyleAMathews он был исправлен в # 11800. Тем не менее, я все еще вижу поведение # 9908 после обновления Гэтсби.

Действия по воспроизведению

У меня есть живой (но не минимальный) пример проблемы в этом репо: https://github.com/vivshaw/vivshaw. На этом сайте есть часть глобального CSS, включая CSS-фреймворк Bulma, остальная часть сайта выполнена в стилизованных компонентах. Производственная версия доступна на netlify .

Ожидаемый результат

И gatsby develop и gatsby build gatsby serve должны выглядеть одинаково. Порядок загрузки стилей должен быть согласованным.

Фактический результат

При сборке для производства мы видим правильный стиль страницы:

Но когда мы загружаем его с помощью gatsby develop , отступ во вступительном разделе ушел в самоволку:

Я покопался и понял, почему. В производственной среде Гэтсби загружает глобальный блок 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 идут последними, поэтому они имеют приоритет, но при сборке они идут первыми и заменяются стилями импортированного компонента.

У меня похожая проблема, возможно, связана с этим, я загружаю стили динамически, при разработке gatsby стили относятся к текущему макету, при сборке gatsby все стили внутри 'source.less' также применяются к макету приложения

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

Нашел и эту проблему. Но мой случай был простой ошибкой.
Я использовал

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

Когда я перешел на использование Gatsby Link, он работает

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

Та же проблема. Слежу за решением, пока пытаюсь отладить.

Добавьте к этому, потому что я думаю, что это связано, но было проблемой только недавно:
Я использую Typography.js, а также Bootstrap - в производстве бутстрап отменяется typography.js, что я хочу, но на сервере разработки стили шрифтов Bootstrap переопределяют мои стили типографики. Это довольно неприятно, потому что мне нужно развернуть сайт, чтобы увидеть, как он действительно выглядит. Если кто-нибудь знает, как я могу отменить Bootstrap с помощью typography.js в разработке gatsby, я бы очень признателен

Добавьте к этому, потому что я думаю, что это связано, но было проблемой только недавно:
Я использую Typography.js, а также Bootstrap - в производстве бутстрап отменяется typography.js, что я хочу, но на сервере разработки стили шрифтов 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 и все равно не повезло. Пользовательский интерфейс материала все еще не работает при развертывании.

Производство:

Dev (локально)

Мне удалось воспроизвести свою проблему и изолировать ее в репо 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 в порядке, отличном от порядка разработки (не уверен, всегда ли это согласованный порядок).
Я удалил «gatsby-plugin-typography» и импортировал созданный из него CSS как обычную таблицу стилей.
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 Для меня исправление заключалось в удалении метода стиля material-ui. Например, следующий код может вызвать проблемы при переходе к производству. Я не знаю почему, но как только я удалил это и поместил этот стиль как встроенный CSS, все заработало, как задумано.

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

Исправлено путем выполнения

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

Хорошо, спасибо @ Skillz4Killz , ценю быстрый ответ, кажется прибегу к тому же методу. Ура!

Это не подходящее решение, я просто хотел вмешаться с быстрым исправлением, которое мне пришлось использовать, чтобы выпустить проект на рынок.

Мое временное исправление заключалось в добавлении !important в каждую строку моего CSS, чтобы он не был переопределен шаблоном CSS. Жестокий.

@ gatsbyjs / core Эта проблема, кажется, снова и снова возникает в этом репозитории в разных вариациях. # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (я уверен, что их больше, я все время их открываю)

Это КРИТИЧНАЯ проблема, поскольку она не имеет четкого решения, влияет на сайты недетерминированно и часто проявляется «таинственным образом», поскольку имеет некоторые очень косвенные побочные эффекты. Изменение атрибутов одного и того же элемента HTML - особенно class - _ очень_ распространенный вариант использования.

Если то, что сказано в # 14601, верно, то это проблема с консолидацией функции гидратации, представленной в React 16.

Существует № 10706, который только помогает обнаружить эту проблему раньше в режиме разработки, но, насколько я понимаю, не решает ее.

Для всех, кто сталкивался с этим, мне удалось исправить без использования встроенного CSS / important.
Это не было запланированным подходом, и мне показалось, что это больше похоже на удачу, но я добавил плагины _gatsby-plugin-material-ui_ и _gatsby-plugin-styled-components_ вместе с обновлением 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

На сайте всего 2 страницы и верстка. Макет автоматически добавляется на 2 страницы через wrapPageElement (почти такой же код, как в gatsby-plugin-layout ). Макет оборачивает содержимое страницы с помощью div , для которого атрибут class установлен на текущее время, а также добавляет время в виде текста под содержимым страницы.

После создания (и обслуживания) сайта, перехода к индексу и его проверки в инструментах разработчика можно увидеть, что время, отображаемое на странице, не такое, как в div class атрибут:

Переход на вторую страницу исправит это поведение, и вы увидите, что время будет одинаковым между содержимым страницы и атрибутом class :

Это будет оставаться так, пока вы продолжаете перемещаться между страницами в одном окне. Если вам случится обновить страницу или открыть ее в окне, несоответствие исчезнет; вы действительно заметите, что время в атрибуте class будет оставаться неизменным каждый раз при обновлении (намекая, что оно кэшировано). «Жесткое обновление» (CTRL + F5) загрузит страницу правильно.

Этот конкретный случай проблемы возникает только при включенном gatsby-plugin-offline и напрямую влияет на gatsby-plugin-layout и, возможно, на любую другую реализацию wrapPageElement .

Единственный обходной путь, который я смог найти до сих пор, - это просто заменить функцию гидрата на render :

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

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

Опять же, это проблема с согласованием метода гидрата , как обсуждалось в нескольких выпусках репозитория React, например https://github.com/facebook/react/issues/10591 , https://github.com/ facebook / react / issues / 12713 , https://github.com/facebook/react/issues/13260.

Обратите внимание, что это может привести к снижению производительности, поскольку вся цель «гидратации» - повысить производительность по сравнению с обычным рендерингом.

Мы закрываем этот вопрос в пользу https://github.com/gatsbyjs/gatsby/issues/17914, чтобы все было организовано.

@eyalroth Я согласен с тем, что это _indeed_ проблема, которую мы должны решить. Давайте обсудим это в https://github.com/gatsbyjs/gatsby/issues/17914 и разберемся с этим.

У меня тоже возникла эта проблема. среда разработки Gatsby работала нормально, но при перезагрузке проблемной страницы создавалась. className и даже встроенный стиль были удалены из определенных тегов. В результате у меня остался div без атрибутов, но все дочерние элементы были отрисованы.

однако, когда я изменил маршрут, используя маршрутизатор ссылок gatsby, а не полное обновление страницы. это устраняет проблему.

Это сводило меня с ума на несколько часов. Я нашел ужасное исправление, вероятно, не очень хорошее решение, но пока оно работает.

Но я изменил тег (div) на (article)

Вдруг

<div>

стал

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

на сборке

Он также работал с ul и pre.

Спасибо за сумасшедший обходной путь @ stefantrinh1 - я тоже испытываю это сумасшедшее поведение css

Если кто-то хочет увидеть его репликацию, у меня есть публичное репо, и я развернул обе версии:

похоже, работает с обходным путем article @ stefantrinh1
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

не работает
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

У меня была аналогичная проблема при условной попытке загрузить компонент на основе значения cookie. Конечно, это не сработало, поскольку у вас есть SSR на производстве (хотя не уверен, почему он работает в режиме разработки). В любом случае, что я закончил, так это заключил свой чек в useEffect и проверил, какой компонент отрисовывать после того, как React возьмет верх (регидратируется) на клиенте. Вы можете использовать componentDidMount() для компонентов класса. После того, как я это реализовал, все работает, как ожидалось.

Моя проблема заключалась в том, что я использовал 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",
"react-custom-scrollbars": "^ 4.2.1",

у меня такая же проблема, как и у emailnikola

25729

В моем случае gatsby-plugin-minify создавал эту проблему, из-за чего производственная сборка перезагружала все стили в производственной сборке.