Gatsby: [bug] Route components are mixed up after refreshing

[tabneib]

Description

• In production: client-side routing works perfectly well until we refresh the page. If the current path is not root, say "/foo", the rendered page is a mixture of the the Route component for root "/" and the Route component for "/foo".
• In development: this issue does not exist.

Steps to reproduce

I have setup a repo to illustrate this issue:
https://github.com/tabneib/gatsby-router-issue

The sample application is found at
https://gatsby-router-issue.web.app

Step 1: Navigate to the sample app
Step 2: Click on "Issue Page"
Step 3: Refresh page

Expected result

The background color of the h1 text should be white when user navigates directly to https://gatsby-router-issue.web.app/issue or when user refreshes the page.

Actual result

The background color of the h1 text is red which is the background color of the h1 header of the Route component for "/" https://gatsby-router-issue.web.app.
However the content of the h1 text is still correct, it is just the style of the corresponding div-container being mixed up with other component.

Environment

System:
OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 10.15.2 - /usr/bin/node
Yarn: 1.16.0 - /usr/bin/yarn
npm: 5.8.0 - /usr/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 74.0.3729.169
Firefox: 67.0.4
npmPackages:
gatsby: ^2.10.4 => 2.10.5
gatsby-image: ^2.1.0 => 2.2.3
gatsby-plugin-create-client-paths: ^2.0.5 => 2.1.1
gatsby-plugin-favicon: ^3.1.6 => 3.1.6
gatsby-plugin-manifest: ^2.1.1 => 2.2.0
gatsby-plugin-offline: ^2.1.1 => 2.2.0
gatsby-plugin-react-helmet: ^3.0.12 => 3.1.0
gatsby-plugin-tslint: 0.0.2 => 0.0.2
gatsby-plugin-typescript: ^2.0.14 => 2.1.0
gatsby-source-filesystem: ^2.0.37 => 2.1.1
gatsby-transformer-sharp: ^2.1.19 => 2.2.0

[NicklasKnell]

Are there any updates on this?

[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! 💪💜

[allforabit]

I'm having the same issue as this. Has anyone found any workarounds? Also I'm not sure if it's related but client routes don't work at all when enabling the offline plugin.

[tabneib]

We still suffer the bug and are considering downgrading gatsby.

[allforabit]

This seems to fix the issue (by disabling ssr):

exports.replaceRenderer = ({ replaceBodyHTMLString }) => {
  replaceBodyHTMLString('<div id="___gatsby"></div>');
};

(added to gatsby-ssr.js).

However I'm still getting a white screen when I enable the offline plugin.

[allforabit]

Actually my issue is a separate one it seems. I tried out the fix I suggested on @tabneib's test repo and it seems to fix the issue. Obviously at the cost of disabling ssr. This may be acceptable as a temporary workaround because ssr is not likely to be as important for a more clientside oriented app.

[tabneib]

I have updated the pipeline with the hard-coded workaround mentioned by @allforabit and the issue seems to be solved now. The workaround is this two lines:
https://github.com/tabneib/gatsby-router-issue/blob/a0b32b7ebcbe8ab371a610a07d253545cf8c111d/.travis.yml#L8
and this:
https://github.com/tabneib/gatsby-router-issue/blob/a0b32b7ebcbe8ab371a610a07d253545cf8c111d/gatsby-ssr.js.patch#L81

Btw, the app deployed at https://gatsby-router-issue.web.app does not illustrate the issue any more.

[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!

[zcmgyu]

This issue still can reproduce on v2.23.12.
A workaround of @allforabit temporarily worked for me.

[jordan-arteaga]

I'm facing the same issue (gatsby 2.24.11), does anyone knows if it's solved in some version? Or the only way is use the solution provided by @allforabit ?