Gatsby: [gatsby-plugin-offline & gatsby-plugin-layout] Link activeStyle problem

[universse]

Description

I'm using gatsby-plugin-offline and gatsby-plugin-layout on my site. Prop activeStyle on Link component rendered in gatsby-plugin-layout layouts/index.js component (footer) isn't properly applied on subsequent access to the site after service worker is installed.
Link rendered in the gatsby v2 layout component (header) works as expected.

Steps to reproduce

With gatsby-plugin-offline, after service worker is installed, on subsequent access, activeStyle={{color: 'black'}} isn't applied to the Link in footer. The interesting thing is in react devtools, activestyle is present (https://i.imgur.com/bp713B3.png)
https://with-offline.netlify.com/

Everything works as expected without gatsby-plugin-offline.
https://without-offline.netlify.com/

Source code is available here https://codesandbox.io/s/w28k3n0kpk

Expected result

"Gatsby" in footer for https://with-offline.netlify.com/ should be black.

Actual result

"Gatsby" in footer for https://with-offline.netlify.com/ is white.

Also, a big thank-you for all the amazing works you guys have done.

[pieh]

This is mixed problem of react hydration and our app shell used by offline plugin (which does use layout, but shouldn't).

The problem is that when offline plugin is used we serve (what should be) blank page. But because it actually includes layout (with link in footer that has inactive styling) when we hydrate (mount react application over existing html), react doesn't handle updating mismatched attributes.

React documentation mention this:

React expects that the rendered content is identical between the server and the client. It can patch up differences in text content, but you should treat mismatches as bugs and fix them. In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
( https://reactjs.org/docs/react-dom.html#hydrate )

[pieh]

I don't think there are reasonable workarounds for this and we need to fix that in gatsby code.

[tudor-ghiorghiu]

I am having a similar issue with this, but with CSS modules className={styles.nameOfMyClass}. While I develop it, everything is find, but when I build & serve it, things are starting to be weird. Even after disabling all modules and leaving only gatsby-plugin-sass it still acts up.

This is the first load of the landing page:

This is the landing page after I navigate away from it and then back again:

If I don't use modules, everything is fine, but that's not what I am after.

[pieh]

@tudor-ghiorghiu I think this is also hydration problem, but given that you removed all of the plugins (so no gatsby-plugin-offline) it's unrelated to this issue. Can you create separate issue (ideally with reproduction - link to repository that will allow us to reproduce and give you answer more specific to your case)

[universse]

Seems like the issue is fixed now. Thanks!

[universse]

Hi sorry for the miscommunication. I am reopening because I encountered this issue again.

[universse]

anyway i found a workaround in case anyone faces the same problem
layouts/index.js

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

  // rest of code
}

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!