gatsby: Material-UI and Gatsby v2 - hot reload does not work for styles

This seriously should be solved.

I have started working on the problem. You can expect a first-class support of Material-UI v4 with Gatsby. We gonna use https://github.com/hupe1980/gatsby-plugin-material-ui for that.

I fiddled around, thats what I found:

• wrapRootElement and the MuiThemeProvider seem to be unrelated to hot module reloading not working. Plain withStyles() without theme do not trigger a HMR as well.
• DOM wise:
  • new styles get injected, new classes are generated, ruleCounter counts up properly (Related: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createGenerateClassName.js)
  • the new classes are not passed to the styled component. It keeps the old classes.
• I tried gatsby-plugin-jss and it’s example in the gatsby repo. Here HMR is broken as well, but the behavior is mirrored: New class names are set for the components, the new styles are not injected in the DOM.
• It seems like, after the HMR, the old sheetManager is still used to get the class names for the component. A new sheetManager exists in sheetsManager with the new styles applied, but that one is not used. Thats why nothing changes, the css is there but the class names are not updated. Probably this line: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/withStyles.js#L195
• Thewhich results in stylesCreatorSaved staying the same value all the time
• componentDidUpdate is not called at all, the HoC is actually reconstructed and remounted every time the styles get updated. I guess here lies the problem.
• Maybe this is related or could help: https://github.com/mui-org/material-ui/issues/13465

I hope this helps @HriBB 😃

I think that we can close the issue. react-hot-loader is supported with the higher-order and hook APIs:

This is using Material-UI v4.0.0-alpha.1 and this example: https://github.com/mui-org/material-ui/tree/next/examples/gatsby-next.

Is SSR with Gatsby and MUI currently broken? I am not able to get things working and the message in the example says it’s not ready yet

Is there any workaround?

@oliviertassinari Any ideas?

FWIW, I don’t remember this being an issue when I filed #7716 and #7568 (there was another issue, related to not being able to track styles when building more than one page).

I’m sure @oliviertassinari’s method works, but you then lose out on the ability to have smooth transitions between pages with shared layouts…

Which is what wrapPageElement and wrapRootElement were intended to resolve.

Looking through the current open issues, it seems that HMR is responsible for quite a few. Maybe it’s worth looking at how Next.js migrated away from react-hot-loader, since it seems like it has caused on-going issues.

I noticed in the changelog that it used to have issues with stateless components, so I tried converting all my stateless components to React.Component but that didn’t resolve this issue.

My biggest complaint with Gatsby is that I can have something looking amazing in the develop mode, but it always has countless issues to debug when I try to build.

This issue is still there and can be reproduced by the latest material example of gatsby. I can provide a codesandbox url if you need, since it requires some work.

It’s fixed in https://github.com/mui-org/material-ui/pull/16195 and will be soon released in Material-UI v4.1.1.

Just tested a production build and it worked successfully! no more first paint issues

Note per https://www.gatsbyjs.org/packages/gatsby-plugin-offline/#remove:

 plugins: [
-  `gatsby-plugin-offline`,
+  `gatsby-plugin-remove-serviceworker`,
 ]

It’s now suggested to add the gatsby-plugin-remove-serviceworker plugin to ensure that the service worker is removed completely. (Otherwise the service worker still tries to take over and jumbles all the styles.) I previously had to force-clear the site’s app data in Chrome, which I obviously couldn’t expect users of a public site to do.

I managed to get hot reloading to work by using export default hot(module)(PageOrTemplate).

Had to add this to all my pages and templates. Hacky, but at least I can work normally …

// @flow

import React from 'react'
import { hot } from 'react-hot-loader'
import { Trans } from '@lingui/react'

import Content from 'components/ui/Content'
import Section from 'components/ui/Section'
import Title from 'components/ui/Title'

import HeroImage from 'components/about/HeroImage'

const HomePage = () => {
  return (
    <Content>
      <HeroImage />
      <Section first>
        <Title>
          <Trans>Hot reloading</Trans>
        </Title>
      </Section>
    </Content>
  )
}

export default hot(module)(HomePage)

Temporal workaround from react-hot-loader issue:

If you use the gatsby example from the MUI project: You need to paste

import { setConfig } from 'react-hot-loader'

setConfig({
  reloadHooks: false
})

on top of the function definition of your root layout i.e. the top layout of the plugin.

It’s a recent regression with an update of react-hot-loader.

this is linked from https://github.com/mui-org/material-ui/blob/master/examples/gatsby/gatsby-ssr.js so I thought I’d jump back in, though I originally commented on hot reloading, i’ve progressed on the project and got to production issues. Here’s what worked for me.

• don’t use withWidth()
• <Hidden implementation="css" />
• gatsby-ssr.js - https://github.com/mui-org/material-ui/blob/master/examples/gatsby/gatsby-ssr.js
• disable gatsby-plugin-offline
• gatsby-browser.js

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

The last bullet is the new suggestion on the thread. Without it, the initial page would look as expected from html and then when the js loaded the styles got weird.