gatsby: navigation.js:173 Uncaught TypeError

Still getting this error from links after updating to Gatsby 2.19.12. I’ve checked my dependencies and re-installed node modules.

I can recreate this issue by:

updating this starter
making a new root element implementing the router with ‘/’ corresponding to ‘index.js’, ‘/foo’ corresponding to the blog or some trivial page
putting a new link to the blog or some trivial page onto index.js and clicking it

navigation.js:173 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
    at navigation.js:173

>  170 | if (document.title) {
>  171 |      pageName = document.title
>  172 | }
>  173 | const pageHeadings = document
>  174 |     .getElementById(`gatsby-focus-wrapper`)
>  175 |     .getElementsByTagName(`h1`)
>  176 | if (pageHeadings && pageHeadings.length) {

See this previously closed issue, seems other people are still running into this aswell

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 20 (6 by maintainers)

Commits related to this issue

fix(gatsby): fix Uncaught TypeError in navigation.js (#23196) * Add null check to address #21263 https://github.com/gatsbyjs/gatsby/issues/21263 is an issue many people are arriving at for a variety... — committed to gatsbyjs/gatsby by shicholas 4 years ago
Use mutations in Gatsby Admin (#23337) * fix(gatsby): Throw error on default export in gatsby-ssr/brows… (#23133) * fix: Handle default export case * heh * fix comment * chore(release): P... — committed to gatsbyjs/gatsby by mxstbr 4 years ago
fix(gatsby): fix Uncaught TypeError in navigation.js (#23196) * Add null check to address #21263 https://github.com/gatsbyjs/gatsby/issues/21263 is an issue many people are arriving at for a variety... — committed to johno/gatsby by shicholas 4 years ago

Most upvoted comments

@garrison0 what is the file name that you are using for the new page? Are you sure it matches that path that you are linking to? For example, did you make a foo.js and then link to /foo? I found if I make a Foo.js and then link to /foo, I see the error you are seeing

arun-is on Feb 10, 2020

The problem persists for me in my environment.

I’ve deleted both node_modules and package-lock.json, reinstalled, and checked the dependencies. I’ve noticed gatsby-link still requires @reach/router 1.2.6 whereas gatsby requires 1.2.1. I’m not sure how relevant that is because the bug persists whether I important Link from gatsby, gatsby-link, or @reach/router.

Interesting if I build and serve, when I first try to load the link, it works, but afterwards I get the error in the devtools console.

If there’s any other information I could provide, I’d be happy to

garrison0 on Feb 8, 2020

@arun-is

that fixed the problem, thanks

but why wouldn’t something like this work? :

...
import NewPage from './NewPage.js'

const App = () => (
    <Router>
      <Home path="/" />
      <NewPage path="/newpage" /> 
    </Router>
)

export default App;

garrison0 on Feb 10, 2020

I am also getting the same error on gatsby@2.20.9

It appears to be when a is being used by one of my antd components. I can’t remove these easily as they have been integral to my application.

Also, the error seemed to pop out of nowhere. One second it was working, the next not.

I have cleared the cache, removed node_modules & lock file. Not sure where to go from here.

dannyvaughton on Apr 13, 2020

I’m having the same issue but on the index.js page. When running Gatsby Develop I get the navigation.js error. Every other page is fine.

Seems to only happen when I use Gatsby Image/image sharp.

jodiedoubleday on Mar 25, 2020

Having the same issue using the same starter template.

For me, removing the line <MDXRenderer>{post.body}</MDXRenderer> in src/templates/blog-post.js made all the pages under /blog load instantly. I’d not made any changes to the starter project up to this point (other than fixing all the errors OOTB). The content on each blog post page still loads, and there’s no console errors. Yet.

– EDIT – It appears just using the tags <MDXRenderer></MDXRenderer> also breaks the page display

jlabs on Mar 22, 2020