Gatsby: Gatsby removes style from the first child of page wrapping element

[dontsave]

Description

In a minimal installation, export wrapPageElement from gatsby-browser like:

export const wrapPageElement = ({ element, props }) => {
   return <Layout>{element}</Layout>;
};

then in Layout (shown here in typescript) put:

export const Layout:React.FC<{}> = props => {
  return (
    <>
      <div style={{ border: `1px solid red` }}>test</div>
      <div style={{ border: `1px solid blue` }}>{props.children}</div>
    </>
  );
};

Steps to reproduce

1. Run gatsby develop. All pages will feature a div with a red border above them.

2. Run gatsby build & gatsby serve. The red bordered div has been replaced with a generic div with no styling data.

Expected result

The red div should remain.

Actual result

The red div is removed. A temporary fix is to put a dummy div above divs you care about so Gatsby can alter it without issue.

Environment

 System:
    OS: Linux 4.4 Ubuntu 16.04.3 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 11.4.0 - ~/.nvm/versions/node/v11.4.0/bin/node
    Yarn: 1.6.0 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.4.0/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: 2.3.15 => 2.3.15
    gatsby-image: 2.0.37 => 2.0.37
    gatsby-link: 2.0.16 => 2.0.16
    gatsby-plugin-react-helmet: 3.0.12 => 3.0.12
    gatsby-plugin-sharp: 2.0.32 => 2.0.32
    gatsby-plugin-styled-components: 3.0.7 => 3.0.7
    gatsby-plugin-typescript: 2.0.12 => 2.0.12
    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

[lannonbr]

So I copied the wrapPageElement function into gatsby-ssr.js and that fixed the issue when doing gatsby build and gatsby serve, but I do agree this is a bug given the blue div is still being rendered so the wrapPageElement call is being called on gatsby build but it isn't acting as expected given the red div styles are being cleared for some reason.

[gatarelib]

Same thing here.

[Norem80]

I reproduced the issue and with gatsby develop everything worked as expected when i've used gatsby build with gatsby serve the whole page was blank but when i've putted wrapPageElement in gatsby-ssr.js everything worked as expected in both cases.

[lannonbr]

Here's a reproduction for this: https://github.com/lannonbr/gatsby-remove-styles-bug-repro

Talking with @DSchau on Discord, the issue at hand is that when gatsby-browser.js is run, ReactDOM is not properly replacing the attributes as expected when rehydrating the app. I am going to have to dive into debugging this and see if it is an issue on ReactDOM's end or something in our internals. That said, if someone is willing to look into this, you are welcome to do so.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[wesbos]

I'm getting this too - my layout component shows everything, but whereever {children} is placed, it's empty