[v2] wrapRootElement issues with material-ui

[cpboyd]

Description

As utilized in @pieh's update to gatsby-plugin-jss the wrapRootElement from both gatsby-browser.js and gatsby-ssr.js seem to be applied when running a build.

This results in errors on the build because the ssr version effectively gets both. (The gatsby-browser.js removes the ssr version in onInitialClientRender)

It seems counter-intuitive that all wrapRootElement exports are always applied regardless of browser/ssr rendering.

As a workaround, commenting out gatsby-browser.js works for gatsby build.

Steps to reproduce

Presumably the using-jss example exhibits this issue. If not, I can work on a reproduction.

Expected result

I'd expect that the gatsby develop version would only load wrapRootElement functions from gatsby-browser.js, while gatsby build would only load wrapRootElement functions from gatsby-ssr.js.

Actual result

All wrapRootElement functions seem to be applied regardless of where they're exported from.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.9.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1.2
  npmPackages:
    gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-image: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-google-analytics: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-jss: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-layout: ^1.0.0-rc.0 => 1.0.0-rc.0
    gatsby-plugin-manifest: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-offline: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-typescript: ^2.0.0-rc.0 => 2.0.0-rc.1
    gatsby-plugin-typography: ^2.2.0-rc.0 => 2.2.0-rc.0
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^2.0.1-rc.0 => 2.0.1-rc.0
    gatsby-remark-responsive-iframe: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-source-filesystem: ^2.0.1-rc.0 => 2.0.1-rc.0
    gatsby-transformer-json: ^2.1.1-rc.0 => 2.1.1-rc.0
    gatsby-transformer-remark: ^2.1.1-rc.0 => 2.1.1-rc.0
    gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[cpboyd]

So the real underlying issue that I'm having is that when the Javascript / browser rendering happens, new styles are added overriding the existing classes... But the classNames of the elements are not modified.

Potentially the reason this doesn't happen with the "using-jss" example is that it's relatively simple.

[cpboyd]

A simplified reproduction:
https://github.com/cpboyd/gatsby-layout-mui-bug

The content will initially appear centered as it should, but quickly moves to the top left after Javascript rendering takes over.

Edit: Fixed. Variables need to be re-initialized for each instance, so as not to be reused across pages.