CSS and Link problem during rendering

[juliensl]

Hi everybody !

Description

I'm using Gatsby 2.32.13 with Material UI 4.11.1 and styled component 5.1.1 to develop our website company.
The website is deployed with netlify.

Sometimes, CSS and Links does not work and I do not have any data in my logs :/

Some screenshot to understand :

Links work (you can see the url at the bottom left) :

Titles in my footer are white, CSS works :

Let's make a ctrl + maj + R to hard refresh the page :
Links are dead (no url)

Titles in my footer are black, CSS is broken :

If I click to a page in my footer, I'm redirected and CSS works again, but it's not stable.

Steps to reproduce

Go to https://live-for-good.netlify.app
See if links and CSS work.
Make a hard refresh : ctrl + maj + R
See if links still working and the CSS in footer are alive or not

Expected result

Links working and CSS still the same

Actual result

Links are broken and CSS too.

Environment

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i3-8145U CPU @ 2.10GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.20.0 - ~/.nvm/versions/node/v12.20.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.20.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0.1
  npmPackages:
    gatsby: ^2.32.13 => 2.32.13
    gatsby-background-image: ^1.1.1 => 1.4.1
    gatsby-image: ^2.4.12 => 2.11.0
    gatsby-plugin-facebook-pixel: ^1.0.5 => 1.0.5
    gatsby-plugin-google-analytics: ^2.8.0 => 2.11.0
    gatsby-plugin-manifest: ^2.4.11 => 2.12.0
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-netlify: ^2.3.19 => 2.11.0
    gatsby-plugin-offline: ^3.2.9 => 3.10.1
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
    gatsby-plugin-react-helmet: ^3.3.4 => 3.10.0
    gatsby-plugin-sharp: ^2.6.43 => 2.14.1
    gatsby-plugin-styled-components: ^3.10.0 => 3.10.0
    gatsby-plugin-webfonts: ^1.1.3 => 1.1.4
    gatsby-source-filesystem: ^2.3.19 => 2.11.0
    gatsby-source-strapi: 0.0.12 => 0.0.12
    gatsby-transformer-sharp: ^2.5.10 => 2.12.0
  npmGlobalPackages:
    gatsby-cli: 2.19.1

It looks like to be a plugin problem, so, this is my package.json :

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "@loadable/babel-plugin": "^5.13.2",
    "@loadable/component": "^5.13.2",
    "@loadable/webpack-plugin": "^5.13.0",
    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "^4.9.1",
    "@storybook/addon-a11y": "^6.0.12",
    "@storybook/addon-backgrounds": "^6.0.12",
    "@storybook/addon-contexts": "^5.3.19",
    "@storybook/addon-docs": "^6.0.12",
    "@storybook/addon-knobs": "^5.3.19",
    "axios": "^0.21.0",
    "babel-plugin-styled-components": "^1.11.1",
    "base-64": "^1.0.0",
    "crypto": "^1.0.1",
    "gatsby": "^2.32.13",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.4.12",
    "gatsby-plugin-facebook-pixel": "^1.0.5",
    "gatsby-plugin-google-analytics": "^2.8.0",
    "gatsby-plugin-manifest": "^2.4.11",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-netlify": "^2.3.19",
    "gatsby-plugin-offline": "^3.2.9",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.3.4",
    "gatsby-plugin-sharp": "^2.6.43",
    "gatsby-plugin-styled-components": "^3.10.0",
    "gatsby-plugin-webfonts": "^1.1.3",
    "gatsby-source-filesystem": "^2.3.19",
    "gatsby-source-strapi": "0.0.12",
    "gatsby-transformer-sharp": "^2.5.10",
    "graphql-voyager": "^1.0.0-rc.31",
    "lodash": "^4.17.19",
    "markdown-to-jsx": "^7.0.1",
    "material-ui-popup-state": "^1.7.0",
    "node-fetch": "^2.6.1",
    "prop-types": "^15.7.2",
    "query-string": "^7.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-intersection-observer": "^8.31.0",
    "react-markdown": "^5.0.3",
    "react-slick": "^0.27.0",
    "react-use-scroll-position": "^2.0.0",
    "sanitize.css": "^12.0.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-storysource": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19",
    "babel-loader": "^8.1.0",
    "babel-preset-gatsby": "^0.5.14",
    "prettier": "2.0.5",
    "storybook-addon-material-ui": "^0.9.0-alpha.21"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

And my gatsby-config :

module.exports = {
  siteMetadata: {
    title: `Live for Good`,
    description: `Live for Good libère le potentiel de jeunes venu·e·s de tous horizons par l’entrepreneuriat social et accélérer l’innovation positive au cœur d’une communauté engagée.`,
    author: `Live for Good`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: "http://MyServer",
        contentTypes: [
          "cartes-programmes",
          "cartes-news",
          "cartes-medias",
        ],
        singleTypes: [
          "header",
          "footer",
          "homepage",
          "communaute",
        ],
        queryLimit: 1000,
      },
    },
    {
      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        displayName: true,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-webfonts`,
      options: {
        fonts: {
          google: [
            {
              family: `Poppins`,
              subsets: [`latin`],
              variants: [`300`, `400`, `700`],
            },
          ],
        },
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GATSBY_GOOGLE_ANALYTICS_KEY,
      },
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: process.env.GATSBY_PIXEL_FACEBOOK_KEY,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
    "gatsby-plugin-netlify",
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

It does not work in local with gatsby build and gatsby serve too, so, it's not a Netlify problem.

Thank you for your help ! :)

[LekoArts]

You could try updating your site to Gatsby v3 and the latest versions of all packages that you use. For more specific help on Material UI you should ask here: https://github.com/hupe1980/gatsby-plugin-material-ui

[juliensl]

Hi @LekoArts , thank you for your recommendations :)

Unfortunately, the migration to the V3 looks like a little bit hard, I do not have time to do this now :/
Do you think it's a Material Ui problem ?

[LekoArts]

The upgrade shouldn't be too hard from what we've seen other people saying, the more involved change would be updating gatsby-background-image and gatsby-image. But I can't guarantee that it'll solve your issue. But moving forward we'll only support v3 so at some point you'll need to update anyways.

You're most probably seeing an issue where the HTML has a different content than what then on the client gets rendered and that can be an issue with Material UI, yes. Or your own code. I see that you lazy-load stuff, so maybe there's your mismatch for the rehydration (lengthy explanation of the problem: https://www.joshwcomeau.com/react/the-perils-of-rehydration/)

[juliensl]

Hi everybody !

We found the problem ! :D
We have a custom Link component to make the difference between internal and external links + to add the language in the url.
But, we are using window.location.pathname for that.
We thought to add a condition if (window !== null)... but it was not enough, we didn't have any problem during the build, but we had a problem with the SSR, because the client rendering was different to the server rendering.

So, we just add a NoSsr wrapper component from Material UI and it solved the problem !

Thank you for your help @LekoArts :)

Have a good day !

[LekoArts]

Glad to hear you got it sorted out! 👍