gatsby-offline-plugin and material ui break on refresh

adelin-b commented 5 years ago

Hello, this is a duplicate of https://github.com/mui-org/material-ui/issues/15594 where it might be offline-plugin or gatsby-plugin-layout at fault.

Expected Behavior 🤔

On the served build click on go to about page and refresh the page and the layout dont break

Current Behavior 😯

On refresh in the served build the layout break, the jss classes changes, the collapse is collapsed while it shouldnt :( On develop it work as it should

Steps to Reproduce 🕹

git clone https://github.com/adberard/gatsby-material-ui-next/
cd gatsby-material-ui-next
yarn
gatsby build
gatsby serve

Context 🔦

Hello ! I am trying to have a layout that is aware of the current pages (pagename.match(/subpages/)) to display a contextual toolbar or icons (which is why I disable gatsby-plugin-top-layout and use gatsby-plugin-layout instead).

It seem to be fixed when I disable the offline-plugin on this repo but on a larger application it break on other points with even with offline-plugin disabled. so I dont think that its the root of the problem. (getting this working in offline is quite a requirement in PWA).

In the plugin/gatsby-plugin-top-layout/ folder I tryed to work without the gatsby-plugin-layout and use the pageContext.layout props passed in gatsby-node.js but without success. (the commented lines with wrapPageElement)

How can we fix this ? I am on it for a few days now and kind of defeated !

universse commented 5 years ago

Hey I faced a similar issue. Take a look at https://github.com/gatsbyjs/gatsby/issues/11738. My workaround would be

src/layouts/index.js

export default  ({ children, location, pageContext }) {
  if (location.pathname=== '/offline-plugin-app-shell-fallback/') return null

  // rest of code
}

I tested on my local machine and it worked. Hope it helps!

adelin-b commented 5 years ago

It indeed really helped ! I was about to rollback to using material-ui v3 because of this and would had lost lot more time, nice catch.

fsgreco commented 5 years ago

@universse

src/layouts/index.js
export default  ({ children, location, pageContext }) {
  if (location.pathname=== '/offline-plugin-app-shell-fallback/') return null

  // rest of code
}
I don't have words to express my gratitude, this just saves me lots and lots of debugging hours. As a matter of fact I was running out of solutions and ready to give up the use of gatsby-plugin-layout.

I think this should be added to the troubleshooting documentation of gatsby-plugin-layout. It seems to me that this is a common problem whenever somebody mix this plugin with gatsby-plugin-offline (indeed I'm not using material-ui but just a customized theme I build from scratch).

I could open a PR on the docs if you don't mind.

universse commented 5 years ago

You are welcome 😄.

I could open a PR on the docs if you don't mind.

Yep I think that's a great idea. One note is if one's using gatsby-plugin-remove-trailing-slashes, I guess the below would be slightly better.

if (location.pathname.startsWith('/offline-plugin-app-shell-fallback')) return null

eugeneoei commented 5 years ago

hello @universse

my css is breaking but i am not using any forms of plugins besides gatsby-source-contentful and gatsby-source-wordpress. any suggestions how this can be fixed? been stuck at it for hours.

the following is in 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 <mathews.kyle@gmail.com>",
  "dependencies": {
    "@material-ui/core": "^4.5.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.18",
    "@reach/router": "^1.2.1",
    "axios": "^0.19.0",
    "contentful": "^7.8.0",
    "dotenv": "^8.0.0",
    "gatsby": "^2.10.0",
    "gatsby-cli": "^2.7.47",
    "gatsby-source-contentful": "^2.1.2",
    "https": "^1.0.0",
    "immutable": "^4.0.0-rc.12",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-infinite-scroller": "^1.2.4",
    "react-redux": "^7.1.0",
    "react-swipeable-views": "^0.13.3",
    "react-swipeable-views-utils": "^0.13.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "underscore": "^1.9.1",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "proxy": "http://phpstack-284753-881093.cloudwaysapps.com"
}

universse commented 5 years ago

@eugeneoei Can you please provide more details, like your gatsby-config, gatsby-browser etc...? Or you can share your repo for e.g. your codesandbox?

Also, do you mind opening a new issue so that we won't notify others?

gatsbyjs / gatsby