<p>gatsby build结果与gatsby development不同</p>

创建于 2018-09-26  ·  69评论  ·  资料来源: gatsbyjs/gatsby

我刚刚在我的最新推送中注意到了这种情况。 直到那时，它工作正常。

我有一个连接到GitLab的Netlify帐户，它从那里构建和部署。

我按照＃5734中的建议操作进行了操作，但对我而言无效。 我也不认为我会使用此处提到的脱机插件。

值得注意的是，我最近遇到了BrowserslistError问题：未知的浏览器查询dead 。 将我的全局gatsby软件包从2.X降级到1.9.X的问题已解决，但是可能导致此CSS问题？

...我该如何解决这些问题之一？

该仓库在这里是公开的： https ：

更新似乎我的package.json中有gatsby-plugin-offline软件包。 但是，从那里和从node_modules中删除它似乎没有什么区别。 我可能没有实际安装就安装了它。

help wanted bug
资料来源
picture jonathan-chin
👍25

最有用的评论

请保持开放。

picture n-batalha 于 2019-02-22
👍22

所有69条评论

@ jonathan-chin您可以通过运行gatsby info --clipboard提供相关的环境信息吗？

另外，我注意到您在共享存储库中从package.json使用Gatsby v1。 对于Gatsby v1，请使用gatsby-cli版本1.x.x 。 gatsby-cli版本2.x.x适用于Gatsby v2

kakadiadarpan picture kakadiadarpan 于 2018-09-27

@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 picture jonathan-chin 于 2018-09-27

@ jonathan-chin我了解您在gatsby-cli版本1.9.x中遇到CSS问题，但这是您应该使用的版本，因为它与您使用的Gatsby版本兼容。

感谢您分享复制存储库。 我来看一下。

kakadiadarpan picture kakadiadarpan 于 2018-09-27
👍1

@ jonathan-chin是否可以告诉您哪个CSS在开发与构建方面完全不同？

kakadiadarpan picture kakadiadarpan 于 2018-09-27

@kakadiadarpan
这是从开发，是预期的样式
screen shot 2018-09-27 at 1 39 24 pm

这是我从构建中得到的：
screen shot 2018-09-27 at 1 35 23 pm

您可以看到它们的CSS类是不同的。

我以前不记得这是个问题。 最后一个好的版本（不影响CSS的地方）是https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

jonathan-chin picture jonathan-chin 于 2018-09-27

我认为解决方法是＃8092。

@ jonathan-chin您可以拉出该修补程序的内容，然后尝试进行这些更改吗？ 注意：如果您还没有看到它，那么Gatsby文档的“如何贡献”部分包含有关如何使用gatsby-dev-cli进行设置的信息，您需要对其进行测试！

DSchau picture DSchau 于 2018-09-27
👍1

另外，@ jonathan-chin看起来就像您在使用盖茨比v1一样。 您是否可以升级到Gatsby v2以获得此修复程序？

DSchau picture DSchau 于 2018-09-27

@DSchau很抱歉，我花了很长时间才回到这个问题上。

将现有项目迁移到v2的工作量很大。 我决定启动一个新的v2启动器，然后逐个迁移（根据需要进行复制和修改）。 在这种情况下，gatsby开发产生的输出与gatsby构建产生的根本不同：

盖茨比建
screen shot 2018-10-07 at 7 03 44 pm

盖茨比开发
screen shot 2018-10-07 at 7 03 48 pm

在构建和开发中比较两个相同元素的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;
}

我有一些Material UI覆盖的scss，我将其加载到v2中的布局组件中。 在开发中，似乎可以很好地合并它们，但是在构建中，似乎忽略了它们？ 那可能是原因吗？

我只有一个import '../scss/style.scss';

jonathan-chin picture jonathan-chin 于 2018-10-08

@ jonathan-chin是否使用v2或按照@DSchau的注释中提到的步骤尝试了此操作？

kakadiadarpan picture kakadiadarpan 于 2018-10-09

@kakadiadarpan抱歉，我没有能力（即时间）来建立工作流程。

看完PR修复程序后，似乎是我遇到的相同问题。 我现在可以关闭此问题并监视PR。

jonathan-chin picture jonathan-chin 于 2018-10-09

@kakadiadarpan对不起，我刚刚意识到一些奇怪的事情。

当我的网站首次加载时，CSS很古怪。 但强制它重新加载索引页，则CSS加载正常。 以下是重现步骤：

1）加载https://sharemeals.org/
检查艾默生报价的底部：
screen shot 2018-10-11 at 7 21 04 pm

2）点击左上方的网站名称。 它将刷新索引页面而不刷新站点。 艾默生报价显示为预期：
screen shot 2018-10-11 at 7 22 14 pm

（艾默生的引号表示其他CSS更改。我仅将其称为它，因为它是最可见的）

jonathan-chin picture jonathan-chin 于 2018-10-12
👍3

@ jonathan-chin感谢您的更新。 我可以按照您提供的步骤重现该问题。 您是否将Gatsby v1或v2用于https://sharemeals.org/？

kakadiadarpan picture kakadiadarpan 于 2018-10-12

〜我遇到了同样的问题：〜

〜当使用injectGlobal ，运行gatsby build之后我得到了不同的样式。 您可以在这里看到问题： https :

〜页面加载完成后，将鼠标悬停在“写作”或“工作”链接上，您会看到样式更改。

通过将标题样式移至page.js而不是全局来解决。

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

@kakadiadarpan正在使用"gatsby": "^1.9.277"

jonathan-chin picture jonathan-chin 于 2018-10-13

我认为解决方法是＃8092。

@ jonathan-chin您可以拉出该修补程序的内容，然后尝试进行这些更改吗？ 注意：如果您还没有看到它，那么Gatsby文档的“如何贡献”部分包含有关如何使用gatsby-dev-cli进行设置的信息，您需要对其进行测试！

@ jonathan-chin您可以在此评论中尝试@DSchau提供的建议吗？

kakadiadarpan picture kakadiadarpan 于 2018-10-23

@kakadiadarpan我想我刚刚尝试实现了这一点。 我安装了gatsby-cli-dev，进行了分叉和拉动，切换了分支等，等等。

问题仍然存在。

如何再次检查我拥有的新的node_modules / gatsby正确而不是旧的？

jonathan-chin picture jonathan-chin 于 2018-10-25

我使用Gatsby 1.XX进行了更多调查，但未提出修复建议。

（我尝试升级到Gatsby 2.XX，并分别提出了修复方案，但均未奏效）

初始页面加载中确实存在所需样式的jss类。 在这种情况下，.jss58。 但是，我正在查看的元素在初始加载时不会获得.jss58。 仅在发出另一个页面请求（甚至请求相同页面）之后，元素才能正确获取.jss58

那么负责确定要应用哪些jss类的负责人呢？ 有一个原因为什么它在初始加载时会产生一个结果，而在所有后续页面请求中却会产生不同的加载？

编辑：还有其他一些主要问题。 在生产版本中，无论页面请求如何，我的svg图标都不会完全加载：
screen shot 2018-10-31 at 2 29 47 pm
这是我在开发中得到的：
screen shot 2018-10-31 at 2 29 51 pm

jonathan-chin picture jonathan-chin 于 2018-10-31
👍2

我正面临着同样的问题。 gatsby开发版和gatsby构建版对我来说非常不同。

如果我直接着陆或使用material-ui组件刷新页面，则这些组件的CSS会损坏。 这些类存在于源代码中，但未应用于元素。 但是，如果我在同一页面上跟随<Link> ，则一切正常。

我也注意到，如果我运行gatsby build ，而gatsby develop运行过程中，盖茨比开发版本也开始在完全相同的方式为盖茨比内部版本行为。

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

（我从未使用过gatsby-plugin-offline）

您可以在http://pawanhegde.netlify.com上查看该网站。
来源位于https://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjs

要查看“预期”版本，请单击底部附近的任何可笑的大图标。

我还没有时间尝试解决＃8092

PawanHegde picture PawanHegde 于 2018-11-06
👍10

我还没有时间尝试解决＃8092

它没有为我解决问题。 我仍然看到相同的行为。

预期

screenshot 2018-11-06 at 11 29 03 pm

实际

screenshot 2018-11-06 at 11 27 18 pm

PawanHegde picture PawanHegde 于 2018-11-06

如果我直接着陆或刷新页面...这些组件的CSS已损坏。 这些类存在于源代码中，但未应用于元素。 但是，如果我在同一页面上跟随<Link> ，则一切正常。

这也完全按照我的描述进行。 我在https://github.com/gatsbyjs/gatsby/pull/8092中尝试了此修复程序，该修复程序适用于大多数页面，但不适用于所有页面。

预期：
image

实际：
image

  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
topherauyeung picture topherauyeung 于 2018-11-16

我通过以下操作解决了这个问题
在我拥有的index.js文件中

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

通过反转顺序，我可以指定要在html中导入css的顺序。
所以，我的最终代码是

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

解决方案：更改进口顺序
这为我解决了问题。 希望它对您也一样。

neutralboy picture neutralboy 于 2018-12-09
👍1

我遇到了同样的问题，其中包括：

  • develop不确定地运行，但是，当它运行时，它可以正常工作。
  • StaticQuery无法确定性地完成图像加载。
  • build不确定地失败，通常是图像中的段错误。
  • build输出有很大不同从的develop -这是交易断路器。
  • develop和build似乎彼此交互。

这些问题是如此沉重，以至于不幸的是，这些问题似乎超过了盖茨比给我带来的任何好处，并迫使我切换回Create React App。

jamesjryan picture jamesjryan 于 2018-12-21
👍19

我尝试了各种变通办法，例如删除所有内联样式并在子组件中而不是在根级别导入.scss。
问题仍然存在。 这真的很麻烦

heyayush picture heyayush 于 2018-12-25
👍3

我正在使用样式化的组件，在gatsby-config.js添加gatsby-plugin-styled-components对我有用。

casprwang picture casprwang 于 2018-12-27
👍6

有同样的问题。
Gatsby构建使用了不同的类名，但是我可以在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

screen shot 2019-02-01 at 8 47 24 am
screen shot 2019-02-01 at 8 47 08 am

RohitRox picture RohitRox 于 2019-02-01
👍1

iya！

这个问题已经悄无声息。 幽灵般的安静。 👻

我们遇到了很多问题，因此我们目前在闲置30天后就关闭了问题。 从上一次更新到现在已经至少20天了。

如果我们错过了此问题，或者您想使其保持打开状态，请在此处回复。 您也可以添加标签“ not stale”以保持此问题的状态！

感谢您加入盖茨比社区！ 💪💜

gatsbot[bot] picture gatsbot[bot] 于 2019-02-22

请保持开放。

n-batalha picture n-batalha 于 2019-02-22
👍22

问题仍然没有解决。 请保持开放一点

  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
danoszz picture danoszz 于 2019-02-26

问题仍然没有解决。 请保持开放一点

  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. 更新到最新的盖茨比版本^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á💁‍♂️

笔记

danoszz picture danoszz 于 2019-02-26

这是令人沮丧的问题。

对我来说，用react-pose来完成的动画，即在gatsby-browser.js和gatsby-ssr.js中所做的是一些奇怪的伏都教东西，双重渲染和一些不确定的CSS东西，页面将在第二次刷新时工作。

我仍然不能指出确切的问题，但是要检查并最终剥离插件，删除库，_解决_它。

尽管盖茨比（Gatsby）与其他JS工具一起很棒，而且浮华，但请注意并负责（不）在生产中使用它。

nmihaica picture nmihaica 于 2019-03-06

是否可以分享新的复制品？ 因为在使用css-in-js时可能无法修复，因为这不是我们的错。

wardpeet picture wardpeet 于 2019-03-06
👍1

我也遇到了这个问题。

我几天前添加了typography.js 。 然后我意识到样式基于typography.js工作在罚款gatsby develop ，但他们没有可用gatsby build 。 我是从入门模板创建应用的，

我试图升级版本，但无法正常工作。
然后，我发现有一个layout.css

image

我的解决方法是评论layout.css ，看来可以解决此问题

image

添加typography.js之后的项目
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

注释掉layout.css
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

Jasonlhy picture Jasonlhy 于 2019-03-06
❤1 👍1

@Jasonlhy这正是我的问题。 我的components文件夹中的layout.js文件正在导入layout.css文件。 一旦我删除了该导入并再次运行npm run build和npm run serve ，该站点就可以正常显示了。 非常感谢！

McMainsLiam picture McMainsLiam 于 2019-03-07

是否可以分享新的复制品？ 因为在使用css-in-js时可能无法修复，因为这不是我们的错。

嗨@wardpeet ，当我添加gatsby-plugin-styled-components时，这刚刚出现在我的项目中，所以这是更新的Gatsby上继续发生的问题的新再现：

编辑：原来我没有复制品了，因为在我编辑样式时问题一直在变化。 部署下一个提交后，导入顺序再次更改。 现在，我的CSS在dev和prod中都相同。 随附的屏幕截图和说明显示了过去发生的事情...

描述

Gatsby在开发和生产中对<head>订购方式不同。 将gatsby-plugin-styled-components与全局CSS一起使用时，这可能会导致dev和prod之间的CSS加载顺序不同，从而导致意外的视觉错误。

这与＃9908相同，后者与一系列类似的问题一起关闭，而赞成＃9733，后者又被关闭，因为根据@KyleAMathews，它已固定在＃11800中。 但是，在确保更新Gatsby之后，我仍然看到＃9908的行为。

重现步骤

在此仓库中，我有一个实时（但非最小）问题的示例： https : 在netlify上发布。

预期结果

gatsby develop和gatsby build gatsby serve应该看起来一样。 样式加载顺序应一致。

实际结果

为生产而构建时，我们会看到正确的页面样式：

screenshot-prod

但是，当我们用gatsby develop加载它时，简介部分的填充已经AWOL了：

screenshot-dev

我做了一些挖掘，并弄清了原因。 在生产中，Gatsby会在样式组件样式之前加载全局css块，如以下两行突出显示的那样：

production-source

但是在开发中，样式化组件样式首先加载：

dev-source

为什么这会导致错误？ 好吧，我用Bulma类和styled-components生成的类标记了组件。 这两个类都会影响填充属性，因此，最后加载的是应用的那个。 在这种情况下，只需删除Bulma类即可轻松解决。 但是我可以想象这种加载顺序行为会导致出现更复杂问题的情况。

环境

> gatsby info

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

绝对感谢，不确定如何解决此问题，我们可能想对头组件添加某种排序。

wardpeet picture wardpeet 于 2019-04-16
👍2

看到与@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
holmberd picture holmberd 于 2019-04-24

也有这个问题。 我们有一个gatsby仓库，可以从NPM库中提取组件。 组件将导入.scss文件，这些文件将以错误的顺序注入到<head>中。 在开发中，gatsby repo的样式排在最后，因此它们具有优先权，但是在构建时，它们排在第一位，并且被导入的组件的样式覆盖。

lucasmarcelli picture lucasmarcelli 于 2019-04-24

我有一个类似的问题可能与此相关，我以动态方式加载样式，在gatsby上开发了与当前布局相关的样式，在gatsby上构建了“ source.less”内部的所有样式也都应用于应用程序布局

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

minimit picture minimit 于 2019-04-26

也发现了这个问题。 但是我的情况是一个简单的错误。
我在用

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

当我更改为使用盖茨比链接时，它可以工作

<Link to="/path/to/page">
  <Button>blah blah</Button>
</Link>
micksatana picture micksatana 于 2019-05-17
👍1

同样的问题。 在尝试调试时请密切注意解决方案。

grantsru picture grantsru 于 2019-05-30

另外，因为我认为这是相关的，但最近才成为问题：
我正在使用Typography.js和Bootstrap-在生产中，bootstrap被typography.js所覆盖，这是我想要的，但是在开发服务器上，Bootstrap字体样式覆盖了我的字体样式。 这非常令人生气，因为我必须部署该网站才能看到它的真正外观。 如果有人知道如何在gatsby development中用typography.js否决Bootstrap，我将非常感激

raph90 picture raph90 于 2019-06-06

另外，因为我认为这是相关的，但最近才成为问题：
我正在使用Typography.js和Bootstrap-在生产中，bootstrap被typography.js所覆盖，这是我想要的，但是在开发服务器上，Bootstrap字体样式覆盖了我的字体样式。 这非常令人生气，因为我必须部署该网站才能看到它的真正外观。 如果有人知道如何在gatsby development中用typography.js否决Bootstrap，我将非常感激

通过用我想要的东西重建Bootstrap来解决此问题

raph90 picture raph90 于 2019-06-16

同样的问题在这里-https://github.com/gatsbyjs/gatsby/issues/16075

TidyIQ picture TidyIQ 于 2019-07-26

我遇到的问题与此处所述类似。 尽管我没有使用任何CSS框架（所有自定义.sass），但是gatsby develop和gatsby build之间的某些样式，元素和类的处理方式有所不同。

这是在我使用URLSearchParams(window.location.search)检查搜索参数的页面上发生的。 这样，我将根据参数是否存在来动态显示元素。 直接转到develop上的URL时，一切正常。 在build ，一切处理方式都大不相同。

预期的（ develop ） ：
image

实际（ build ） ：
image

条件逻辑：

{(!!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 picture j-651 于 2019-08-12
👍1

@ j-651我似乎有同样的问题。 我从本地存储读取数据并有条件地渲染类名，并且渲染了错误的类名。 任何解决方法？

OrKoN picture OrKoN 于 2019-08-19

@OrKoN为了解决这个问题，我最终要做的是使用原始片段作为组件创建一个单独的页面，然后传入一个有条件渲染的道具（如果可以的话）。 不知道这是否适合您的实现。

j-651 picture j-651 于 2019-08-19
👍1

我有类似的问题。 首先，由于组件样式不同，我使用的版本不同。 我添加了gatsby-plugin-styled-components插件，并修复了这些插件。 然后我注意到MaterialUI开始崩溃，所以我添加了gatsby-plugin-material-ui ，但还是没有运气。 部署时，物料用户界面仍然损坏。

生产：
image

开发人员（本地）
image

Skillz4Killz picture Skillz4Killz 于 2019-08-22

我能够重现我的问题并在回购中隔离https://github.com/gatsbyjs/gatsby/issues/16925这与链接组件的行为有关，可能是另一个问题

OrKoN picture OrKoN 于 2019-08-22

这不是一个合适的解决方案，而只是想快速解决一下我不得不将项目推向市场的过程。

我复制并粘贴了typography.js的输出，将其放置在.scss文件中，并确保将其导入到其他所有内容中，并带有一点信息。

typographyjs-output.scss
请忽略此文件，谢谢！
我必须提取typography.js生成的CSS并将其放在此处。
为什么？ 看到这里： https :
生产版本以与开发不同的顺序导入SCSS和css-in-js（不确定它是否始终是一致的顺序）。
我删除了“ gatsby-plugin-typography”，并像普通的ol'样式表一样导入了从中生成的CSS。
Typography.js从一开始就包含在项目中，我没想到它会引起任何问题。
是的-我在网站的其余部分中设置了这些默认样式，因此删除该文件会使事情看起来有些奇怪。

相当糟糕的解决方案，但是如果您处于困境中，它会起作用。

alexboots picture alexboots 于 2019-08-22

我刚刚意识到的是，在初始页面加载时，CSS损坏了，但是先更改页面，然后再次返回主页，CSS才能工作。 CSS仅在初始页面加载时看起来不正确并且加载速度也很慢

Skillz4Killz picture Skillz4Killz 于 2019-08-22
👍9

使用Material-UI，我在gatsby.config.js中两次调用了gatsby-plugin-material-ui。 初始页面加载闪烁，某些样式有时未添加。 现在，它可以使用最新的插件版本，并且此模块可以导出到gatsby.config.js的plugins数组中：
, { resolve: 'gatsby-plugin-material-ui', // If you want to use styled components you should change the injection order. options: { // stylesProvider: { // injectFirst: true, // }, }, }

KoolP picture KoolP 于 2019-08-31

有人在这里找到解决方案吗？ 我发现生产上的样式不正确（第一页视图），即使本地正常也是如此。 例如。 该组件在生产时具有jss13和jss14，但是这些类应该是jss43和jss45。 我也看到头部的样式顺序有所不同，但是在解决方法上迷路了......我也包括了两个插件，但是没有运气：

plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-plugin-material-ui',
];
ocundale picture ocundale 于 2019-09-16

@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 picture Skillz4Killz 于 2019-09-16

好的，谢谢@ Skillz4Killz ，感谢您的快速响应，这似乎很遗憾，但是我想我那时将使用相同的方法。 干杯!

ocundale picture ocundale 于 2019-09-16
👍1

这不是一个合适的解决方案，而只是想快速解决一下我不得不将项目推向市场的过程。

我的临时解决方案是在CSS的每一行中添加!important ，这样它就不会被模板CSS覆盖。 野蛮。

xinsight picture xinsight 于 2019-09-17
😕1

@ gatsbyjs / core在不同版本中，这个问题似乎一次又一次地在整个存储库中弹出。 ＃3741＃5100＃9911＃10370＃12360＃14601＃17676＃17728（我确定还有更多，我一直在不断发现它们）

这是一个严重的问题，因为它没有明确的解决方法，不确定地影响站点，并且由于具有一些非常间接的副作用，因此常常以“神秘的方式”出现。 更改同一HTML元素（尤其是class ）的属性是一个非常常见的用例。

如果＃14601中的说法正确，则这是React 16中引入的水合功能合并的问题。

＃10706仅有助于在开发模式下及早发现此问题，据我所知，它不能解决该问题。

eyalroth picture eyalroth 于 2019-09-25
👍3

对于其他遇到这种情况的人，我设法在不使用内联CSS /重要信息的情况下进行了修复。
这不是一种计划的方法，确实让我感觉更像运气，但是我添加了_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",
ocundale picture ocundale 于 2019-09-25
👍2 ❤1

我能够重现该问题，至少是一个实例。

从此存储库创建一个新的gatsby站点，该站点最初是从默认启动程序克隆https :

它几乎没有任何依赖项/插件：

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

该网站只有2页，只有一个版面。 布局通过wrapPageElement自动添加到2个页面中（与gatsby-plugin-layout几乎相同的代码）。 布局使用div包裹页面内容，该属性将class属性设置为当前时间，同时还将时间作为文本附加在页面内容下方。

构建（并提供）网站后，导航至索引并在开发人员工具中对其进行检查，您可以看到页面中显示的时间与div class属性：
gatsby-hydrate-bug1

导航到第二页将纠正此问题，并且您将看到页面内容和class属性之间的时间相同：
gatsby-hydrate-bug2

只要您继续在同一窗口中的页面之间导航，就可以保持不变。 如果您碰巧刷新页面或在窗口中打开页面，则不一致会逐渐蔓延。 您实际上会注意到class属性中的时间将在每次刷新时保持不变（提示它已被缓存）。 “硬刷新”（CTRL + F5）将正确加载页面。

这个问题的特定实例只发生与gatsby-plugin-offline启用，它直接影响到gatsby-plugin-layout ，以及可能的其他任何执行wrapPageElement 。

eyalroth picture eyalroth 于 2019-09-25
👍4

到目前为止，我唯一能解决的方法是简单地将hydrate函数替换为render ：

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

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

再次，这是与和解问题水合物的方法，如在在多个问题讨论阵营储存库，例如https://github.com/facebook/react/issues/10591 ， https://github.com/ facebook / react / issues / 12713 ， https://github.com/facebook/react/issues/13260。

请注意，这可能会导致性能下降，因为“水化”背后的整个目的是在纯渲染上提高性能。

eyalroth picture eyalroth 于 2019-09-26
👍6 😕3 ❤1 👎1

我们正在通过https://github.com/gatsbyjs/gatsby/issues/17914解决此问题，以使事情井井有条。

LekoArts picture LekoArts 于 2019-09-27

@eyalroth我同意这是我们需要解决的问题。 让我们在https://github.com/gatsbyjs/gatsby/issues/17914中对此进行讨论，并深入到此

sidharthachatterjee picture sidharthachatterjee 于 2019-09-27
👍3

我也遇到这个问题。 Gatsby开发环境很好，但是在重新加载问题页面时仍在构建中。 className甚至是内联样式已从某些标签中剥离。 这给我留下了一个没有属性的div，但是所有的孩子都被渲染了。

但是，当我使用gatsby链接路由器而不是整页刷新来更改路由时。 它解决了这个问题。

这让我发疯了几个小时。 我发现了一个可怕的修复程序，可能不是一个好的做法，但目前确实有效。

但是我将（div）标签更改为（article）

突然

<div>

成为

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

在建

它还与ul和pre一起使用。

stefantrinh1 picture stefantrinh1 于 2020-02-28
👍2

感谢疯狂的解决方法@ 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

funkfinger picture funkfinger 于 2020-03-09

在有条件地尝试基于cookie值加载组件时，我遇到了类似的问题。 当然，由于您在生产环境上具有SSR，因此此方法不起作用（尽管不确定为什么要在开发模式下工作）。 无论如何，我最终要做的是将我的支票包装在useEffect并检查一旦React接管客户端（再水化）后要呈现的组件。 您可以将componentDidMount()用于类组件。 实现此功能后，一切都会按预期进行。

DekiGk picture DekiGk 于 2020-03-15

我的问题是，我用wrapPageElement和wrapRootElement的gatsby-browser.js而不是在gatsby-ssr.js 。 将我复制的内容复制到gatsby-ssr.js一切按预期开始工作。 请参阅@jlkiri的回复： https :

funkfinger picture funkfinger 于 2020-03-17
👍5

2020年将发行同一期。单击解决了该问题，但存在完全重新加载的问题。
“ gatsby”：“ ^ 2.19.45”，
“ react-custom-scrollbars”：“ ^ 4.2.1”，

emailnikola picture emailnikola 于 2020-05-18

我和emailnikola有相同的问题

Borivoje-06 picture Borivoje-06 于 2020-05-18

25729

blainekasten picture blainekasten 于 2020-07-13

在我的案例中， gatsby-plugin-minify造成了这个问题，导致生产版本重新加载生产版本中的所有样式。

hayyaun picture hayyaun 于 2020-09-17
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

brandonmp picture brandonmp  ·  3评论
signalwerk picture signalwerk  ·  3评论
dustinhorton picture dustinhorton  ·  3评论
totsteps picture totsteps  ·  3评论
theduke picture theduke  ·  3评论