Gatsby: Anchor links don't work

[AndrejGajdos]

Description

I use gatsby-transformer-remark to parse markdown files and get table of contents. If I hit an item in table of contents (anchor link), the browser doesn't scroll to the section.

Steps to reproduce

I created a basic demo project here. If you open for example http://localhost:8000/docs/tauchain-agoras-faqs and scroll to the bottom, you can see table of content there.

I created a recording, where I click on items in table of contents and nothing happens.

Expected result

If item in table of contents is clicked, browser should scroll to that section.

Actual result

The browser doesn't scroll to the section, it just changes hash in browser url address.

Environment

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.1.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 76.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.12 => 2.23.12
    gatsby-image: ^2.4.9 => 2.4.9
    gatsby-plugin-manifest: ^2.4.14 => 2.4.14
    gatsby-plugin-offline: ^3.2.13 => 3.2.13
    gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
    gatsby-plugin-sharp: ^2.6.14 => 2.6.14
    gatsby-remark-autolink-headers: ^2.3.10 => 2.3.10
    gatsby-remark-embed-video: ^3.0.10 => 3.0.10
    gatsby-source-filesystem: ^2.3.14 => 2.3.14
    gatsby-source-git: ^1.1.0 => 1.1.0
    gatsby-transformer-remark: ^2.8.23 => 2.8.23
    gatsby-transformer-sharp: ^2.5.7 => 2.5.7
  npmGlobalPackages:
    gatsby-cli: 2.12.40
    gatsby: 2.8.8

[vladar]

Hi @AndrejGajdos

Thanks for the detailed issue, reproduction and video! Really appreciate it 👍

I was able to reproduce this locally but reproduction is not reliable. One time it works, the other time it doesn't. Also, sometimes it starts working after scrolling the page up and down.

It looks like gatsby-react-router-scroll package is the culprit. I suspect that this PR has caused the problem in the first place: #24306

At least I can't reproduce this problem on versions prior to it. Can you also try reproducing it with [email protected] (the version of the plugin before this PR)?

I've used yarn resolutions to test it. Add this to package.json and run yarn

  "resolutions": {
    "gatsby-react-router-scroll": "3.0.3"
  }

[AndrejGajdos]

@vladar yes, this issue is random and I decided to create a recording so you can believe me :)

I tried "gatsby-react-router-scroll": "3.0.3" but it didn't help. There is still that issue :(

[spences10]

Myself and someone else I know were having this issue but it's now resolved with the resolutions.

"resolutions": {
  "gatsby-react-router-scroll": "3.0.3"
}

Where should I be watching for this to be fixed @vladar?

I don't actually use gatsby-react-router-scroll as a dependency in my project.

Is it fair presume this is now fixed with #25161 ?

[AndrejGajdos]

@vladar I just tried it again and "gatsby-react-router-scroll": "3.0.3" fixed this issue. Thanks for help.

However, I am not able to run my original project because of new issue #25657 :(

[dalxds]

same issue here!
I believe the issue is on one of the recent versions of gatsby since it didn't existed some days ago that I hadn't updated.

[AndrejGajdos]

@dalxds try to use "gatsby": "2.24.18", it works for me.

[dalxds]

@AndrejGajdos I'll try it and I'll let you know. thanks!

[josephmarkus]

@AndrejGajdos which version did you have in mind? 2.24.18 doesn't exist in the changelog - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md

[AndrejGajdos]

@josephmarkus sorry, it was 2.24.2

[josephmarkus]

@AndrejGajdos I've just tried 2.24.2, but it's the same issue. I cannot see anything in the changelog that would say that this issue has been addressed. Is there an ETA for when this would be fixed?

[blainekasten]

I'm going to close this issue as the original reporter's issue has been solved! Feel free to keep discussing here or opening a new issue.

For those still experiencing the issue, it seems like you might have some dependency issues. Try deleting your node_modules, clearing cache and re-installing fresh!

[AndrejGajdos]

I don't think it should be closed. This workaround with yarn resolutions should be added to Readme or documentation.

[josephmarkus]

I tried [email protected] with:

"resolutions": {
  "gatsby-react-router-scroll": "3.0.3"
}

and the problem still persists

[ediblecode]

I raised a new issue which I think is this same issue but I'm not sure, anyway it's #25778 if anyone's interested.

[brootle]

have same problem, I am not sure when it started, I didn't have this problem before, so my guess is that it happened after some package update, as for gatsby version, I now have "gatsby": "^2.24.7"... I just tried to run npm update and updated all packages to latest and guess what, the problem still exists + I got other issues that broke my app logic in some parts :) so had to downgrade and will just use my own workaround to handle anchor links clicks in table of contents

[rootlinux2]

I have the same problem with

"gatsby": "2.24.73",
"gatsby-cli": "2.12.107",

I tried the resolution but is not working

"resolutions": {
"gatsby-react-router-scroll": "3.0.3"
}

[brootle]

There is super easy solution to this problem. Use Gatsby Link component for anchor links, don't use a for that. Gatsby documentation specifically says that we must use a for anchor links, but it simply fails when it's about smooth scrolling. I replaced a with Link and everything magically works after that. I also added scroll-behavior: smooth; for html in styles

[rootlinux2]

@brootle you are right, my problem was gatsby-link, I just replaced for an anchor tag and the issue was solved, Thanks, I did not see the documentation recommendations

[brootle]

I didn't notice that <a> didn't render in my reply, so what works in your case? <a> or <Link>? as in my case <Link> works and <a> doesn't work

[rootlinux2]

oh dude, what a happy misunderstanding! in my case <Link > from gatsby does not work, but using the <a> HTML tag works, the wear thing here is that I was using <Link> for a time but after updated gatsby version and all my dependencies I face this issue, Now I see in the gatsby documentation this recommendation and everything makes sense.

[rbarbazz]

@rootlinux2 Thanks for sharing the documentation link, updating Gatsby to the latest version and using <a> tags fixed the issue for me as well.

[josephmarkus]

Using Gatsby Link takes advantage of faster page navigation. Using anchor tags will cause a full page refresh.

[josephmarkus]

The idea is to use Gatsby Link for any links within your application (e.g. a link on homepage to about page). For everything else, you should use anchor tag (<a>).

This is what I have in my package.json:

"resolutions": {
  "**/gatsby-react-router-scroll": "2.2.3",
},
"dependencies": {
  "gatsby": "~2.24.67"
}

[rbarbazz]

I think I got confused.
I thought the issue discussed here was about links within the same page:

<a href="#content">Link</a>
...
<div id="content"></div>

[josephmarkus]

You can also use #hash-links when coming from another page. For example <Link to="/about#some-section" />