Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Client side only paths do not update dom properly on direct linking #17891

Open
jrusso1020 opened this issue Sep 25, 2019 · 15 comments
Labels

Comments

@jrusso1020
Copy link

@jrusso1020 jrusso1020 commented Sep 25, 2019

Description

When you use client only paths, if you refresh on any client only page the dom isn't properly updated. It causes the dom from the initial root page to stick around and breaks the other client side pages. This does not happen locally, but it happens in production environments both on netlify and s3/cloudfront

I noticed this on my own project, where going directly to a client side route was adding the component into my root client side route's structure.

So something like

// app/login
<div class="container">
  <h1>Login</h1>
</div>

and another component like

// app/profile
<div class="different-container">
  <h2>Profile</h2>
</div>

But instead in the browser I see

<div class="container">
  <div class="different-container">
    <h2>Profile</h2>
  </div>
</div>

I am unable to reproduce using npm run build && npm run serve locally

Steps to reproduce

Go to the example https://client-only-paths.gatsbyjs.org/ click on any other page that is not the 1st page. Then click refresh. You will see that the background color is not the correct color but is instead the background color for page 1

You can also go directly to https://client-only-paths.gatsbyjs.org/page/4 and see that the background color is that of page 1 instead of purple like it should be

Expected result

The background color should be the appropriate color for the page.

Actual result

The background color is incorrect

Environment

@jrusso1020 jrusso1020 changed the title Client side only paths using previous path styles/dom Client side only paths do not update dom properly on direct linking Sep 25, 2019
@LekoArts LekoArts added the type: bug label Sep 26, 2019
@mischor

This comment has been minimized.

Copy link

@mischor mischor commented Sep 27, 2019

I have a similar problem. Here the link target for an internal-to-this-site page, is incorrect.

  • Only fails when deployed to a site where the pathPrefix is being used (I deploy to a github pages site)

  • Failure: the link target has an extra path element (of the page being linked from). E.g., if the page where the link is, is:
    pages.github..../some-org/some-repo/from-page,
    the link (seen by hovering, and also clicking) should be:
    pages.github..../some-org/some-repo/to-page,
    but if you hit "refresh" on the from-page, (or initially), the link is instead:
    pages.github..../some-org/some-repo/from-page/to-page,

This (in my case) can be "fixed" by using the left-hand-navigation (which my site has) to select a different page, and then selecting the the original from-page from the left-hand-navigation: now the links are correct. Note that just using the browser "back" button isn't sufficient to fix this.

@ajmariduena

This comment has been minimized.

Copy link

@ajmariduena ajmariduena commented Oct 4, 2019

Same issue here, did you solve it?.

@mischor

This comment has been minimized.

Copy link

@mischor mischor commented Oct 4, 2019

two workarounds. #1: when specifying client-side-only path to a page in a link, only use forms starting from the "top" of the website, with urls that look like /pathPart1/pathPart2 etc. Don't use ../ kinds of path specs.

Fix #2: I was using gatsby-theme-carbon's form, and I changed it to use gatsby's form With both of these, fixes my issues were worked-around.

@ajmariduena

This comment has been minimized.

Copy link

@ajmariduena ajmariduena commented Oct 15, 2019

As you can see in the example: https://client-only-paths.gatsbyjs.org/page/4 first it shows 1 and then 4 that's the issue do you guys have any workarounds?.

Pd: it happens when you reload too.

@jrusso1020

This comment has been minimized.

Copy link
Author

@jrusso1020 jrusso1020 commented Oct 31, 2019

It looks like the example has been taken down, would love to get some feedback on this bug and see if anyone has any insight into why?

@universse

This comment has been minimized.

Copy link
Contributor

@universse universse commented Nov 1, 2019

It seems to be a hydration problem. There's a mismatch between the server-rendered output and the actual client-only output.

For now a temporary workaround is disabling server-rendering on those client-only paths.

// https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths/src/pages/index.js

...
export default props => {
  if (typeof window === 'undefined') return null
  return <App {...props} />
}

Can check out the examples here:
original https://buggy-client-only-paths.netlify.com/page/3
with workaround https://non-buggy-client-only-paths.netlify.com/page/3

@s-kris

This comment has been minimized.

Copy link
Member

@s-kris s-kris commented Nov 12, 2019

It seems to be a hydration problem. There's a mismatch between the server-rendered output and the actual client-only output.

For now a temporary workaround is disabling server-rendering on those client-only paths.

// https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths/src/pages/index.js

...
export default props => {
  if (typeof window === 'undefined') return null
  return <App {...props} />
}

Can check out the examples here:
original https://buggy-client-only-paths.netlify.com/page/3
with workaround https://non-buggy-client-only-paths.netlify.com/page/3

Thanks for sharing this. I tried to use the workaround you mentioned but I'm not able to fix this.
You can see a minimal repo here: https://codesandbox.io/s/gatsby-starter-default-7nv3l
correct styles: https://csb-7nv3l.netlify.com/sample/
incorrect styles: https://csb-7nv3l.netlify.com/sample/11

can you share code repo for https://non-buggy-client-only-paths.netlify.com/page/3 ?

@universse

This comment has been minimized.

Copy link
Contributor

@universse universse commented Nov 12, 2019

I cloned from https://github.com/gatsbyjs/gatsby/blob/master/examples/client-only-paths and that was the only modification I made.

What your example is missing is gatsby-plugin-netlify to handle redirect from /sample/* to /sample/. Without this, the 404 page is temporarily shown, causing the flash.

@s-kris

This comment has been minimized.

Copy link
Member

@s-kris s-kris commented Nov 12, 2019

Thank you, I added gatsby-plugin-netlify and the problem is fixed now for the demo site.
However, my actual site which is not hosted on netlify needs to be fixed.

@universse

This comment has been minimized.

Copy link
Contributor

@universse universse commented Nov 13, 2019

Which hosting service are you using?

@s-kris

This comment has been minimized.

Copy link
Member

@s-kris s-kris commented Nov 13, 2019

I'm deploying my gatsby site as a static app on AWS with caprover

@s-kris

This comment has been minimized.

Copy link
Member

@s-kris s-kris commented Nov 13, 2019

this ngnix config file in caprover's deployment fixed it for the codebox's sample

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /sample {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /sample/index.html;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

@wardpeet

This comment has been minimized.

Copy link
Member

@wardpeet wardpeet commented Nov 14, 2019

I'm not 100% sure if I follow the issue here. I feel like it's a misconfiguration more than a gatsby issue.

@jrusso1020

This comment has been minimized.

Copy link
Author

@jrusso1020 jrusso1020 commented Nov 14, 2019

@wardpeet if you look at this post by @universse #17891 (comment) he says it's a hydration problem with Gatsby. Once you fix the Hydration problem using the code he gives (and assuming you have configured your redirects correctly), he was able to get it working

If there is no plan to fix this in the short term, maybe there should be some documentation on this fix for the hydration problem? Or at least an update to the example repo https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths

@universse

This comment has been minimized.

Copy link
Contributor

@universse universse commented Nov 14, 2019

This seems to be related to this React 16 SSR issue facebook/react#10591 . I doubt if it can be fixed from Gatsby side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.