Gatsby example not working on build

[oorestisime]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Using the gatsby example during the developing phase (gatsby develop) and build (gastby build) i expect to have the same styling and functionnality.

Current Behavior

On develop everything works perfectly. On build everything is weird. i have different output when i refresh pages and it seems everything is messed up

Steps to Reproduce

I can't share the code right now in total. i can provide with files if needed. I used the gastby-ssr and withRoot and getPageContext of the example.

Here are screenshot of things not working:

Index page

Another page

Same page hitting a refresh

Going back to index

Refreshing index again gives first photo

How things are normally

Context

Your Environment

"@material-ui/core": "^1.4.1",
"@material-ui/icons": "^2.0.0",
"classnames": "^2.2.6",
"eslint": "^5.2.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"gatsby": "next",
"gatsby-image": "next",
"gatsby-link": "^1.6.46",
"gatsby-plugin-react-helmet": "next",
"gatsby-plugin-sharp": "next",
"gatsby-remark-copy-linked-files": "next",
"gatsby-remark-images": "next",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-filesystem": "next",
"gatsby-transformer-remark": "next",
"gatsby-transformer-sharp": "next",
"jss": "^9.8.7",
"lodash": "^4.17.10",
"mdi-material-ui": "^5.2.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-helmet": "^5.2.0",
"react-images": "^0.5.19",
"react-jss": "^8.6.1",
"react-share": "^2.3.0",
"react-simple-maps": "^0.12.1",
"react-slick": "^0.23.1"

[oliviertassinari]

@oorestisime Your issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 . Thank you!

[oorestisime]

@oliviertassinari well at the same time as i said everything works great when not building. i am not sure sandbox would demonstrate the issues. Should i publish a repo containing the code? then it would be a matter of yarn install ; gatsby build ; gatsby serve.

[oliviertassinari]

@oorestisime Yes, we consider a repository as a full reproduction test case :).

[oorestisime]

@oliviertassinari ^^ here you are https://github.com/oorestisime/gatsby-material-ui

[oliviertassinari]

@oorestisime Something is very wrong with your setup. The root component is mounted many times. I'm updating the gatsby example to handle this use case. But it should help with code splitting too.

[oliviertassinari]

@oorestisime So, something really weird is going on. I would encourage you to focus on why the React tree is rendered 12 times when first displayed.

[oorestisime]

I am not sure i understand what you mean, i have now c/p the gatsby-ssr, withRoot and pagecontext as in the example so my setup should be the same as in the example (i cleaned unused and weird configurations of my dependencies as well).

[oorestisime]

@oliviertassinari when should i use the withRoot? i ve been using it in every component, every page etc. I've removed the call from the components (letting it only in the top component whether its a page or a template) and the tree doesn't get rendered as many times and everything seems to be working.
Maybe we could add to the docs a few words about that if indeed that is the cause (i could PR that)

[oorestisime]

@oliviertassinari i am bringing this back up just in case you have a few minutes to answer this question which could be really helpful for me (and others i guess messing around with material-ui and gatsby)