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

navigation.js:173 Uncaught TypeError #21263

Closed
garrison0 opened this issue Feb 7, 2020 · 20 comments · Fixed by #23196
Closed

navigation.js:173 Uncaught TypeError #21263

garrison0 opened this issue Feb 7, 2020 · 20 comments · Fixed by #23196
Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby

Comments

@garrison0
Copy link

garrison0 commented Feb 7, 2020

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:

  1. updating this starter
  2. making a new root element implementing the router with '/' corresponding to 'index.js', '/foo' corresponding to the blog or some trivial page
  3. 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

@marcysutton
Copy link
Contributor

Hi there, I got this to work with the latest Gatsby version by deleting the node_modules folder and package-lock.json (or yarn.lock) and then doing a reinstall.

@garrison0
Copy link
Author

garrison0 commented Feb 8, 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

@arun-is
Copy link
Contributor

arun-is commented Feb 10, 2020

@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

@garrison0
Copy link
Author

garrison0 commented Feb 10, 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;

@sidharthachatterjee
Copy link
Contributor

Looks like the issue here is that page paths are case sensitive and hence it isn't able to find your page and breaks at this confusing spot (because it tries to announce the route change).

We should catch that before attempting this and redirect to 404.

@sidharthachatterjee sidharthachatterjee added help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby labels Feb 12, 2020
@github-actions
Copy link

github-actions bot commented Mar 4, 2020

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/contribute for more information about opening PRs, triaging issues, and contributing!

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

@github-actions github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Mar 4, 2020
@jakubzloczewski
Copy link

jakubzloczewski commented Mar 9, 2020

I had similar problem as @garrison0 and I fixed it by following these instructions: https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/#configuring-pages-with-matchpath

@github-actions github-actions bot removed the stale? Issue that may be closed soon due to the original author not responding any more. label Mar 10, 2020
@nickwarters
Copy link

I've experienced the same issue, but only with some links. After trying a number of things I found it was only an issue with url paths with a capital letter in them. As soon as I switch them all lowercase they work fine.
To get around this, I have tried using a slugify function to convert all each everything to a lowercase URL in my Gatsby-Node but it doesn't seem to be wanting to play ball.

@nickwarters
Copy link

Okay ... I managed to fix it for me. I had pages which were created with slugified paths, however some of my links were pointing to un-slugified paths of the pages. Theoretically this should have just returned a 404 Page not Found however instead it threw this error.

Resolved for me now though.

@cmr624
Copy link

cmr624 commented Mar 15, 2020

Having a similar issue, I am using Gatsby-Image, and reloading or hot reloads crash with the error.

How would I go about reverting to the correct version of @reach/router ? I have Gatsby installed, but no @reach/router in my package.json

@jlabs
Copy link

jlabs commented Mar 22, 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

@jodiedoubleday
Copy link

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.

@Ir1d
Copy link

Ir1d commented Mar 26, 2020

I'm having the same issue on certain page. There doesn't seem to be much difference between the pages. Also using image sharp
upd: but disabling sharp doesn't help

upd: I solved my issue. I found there was a \\ inside my frontmatter, and the str was used as key of some component. after setting some other things(ex: index) as key, the problem was solved.

Hint: I debugged this by running build (since the build was mostly correct and resulted minor error). Manually opening the corresponding html and in the console it told me that I had two strange things as key and there were duplicate(?? while actually it is not duplicate, but the problem was indeed in the keys)

@xanderios
Copy link

Had the same issue, not a Gatsby issue I guess:
What I did to debug that:

  1. Commented every section of my homepage (the page that gave error on build);
  2. Uncomment sections of homepage 1 by 1 until I find the one with error.

In my case it was a SwiperJS Instance that was removed between pages, and that was causing the error.

I read that some people installed some plugins and libraries and got the error, so I figured that my Swiper (but other libraries too) could bring the error. Hope it helps you guys.

@saadaouad
Copy link

Any update on this please? still getting the same issue using "gatsby": "2.20.9", version

@EliranGooner
Copy link

EliranGooner commented Apr 2, 2020

Still getting this error too.

Update:
Fixed it on mine by moving a download <a> to another place on the page.

@dannyvaughton
Copy link
Contributor

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.

@shicholas
Copy link
Contributor

I've been getting this error too trying to create dynamic client-side routes using Reach Router (fixed to version 1.2.1 to address other comments in this thread.

I pushed #23196 as a potential fix to this nullcheck.

@BrooksPoltl
Copy link

BrooksPoltl commented Apr 19, 2020

I had this issue, and nothing else worked until I found out that slugs are formatted /article-name/ so I was creating a page for /topic//article-name/ by doing

createPage({
      path: '${post.node.frontmatter.topic}/${post.node.fields.slug}',
      component: blogPost,
      context: {
        slug: post.node.fields.slug,
        previous,
        next,
      },
    })

Which when you link to this page it will resolve to topic/article-name

@Hyraze Hyraze closed this as completed Apr 20, 2020
@Hyraze
Copy link
Contributor

Hyraze commented Apr 20, 2020

This issue will be closed with this pull request #23196

gatsbybot pushed a commit that referenced this issue Apr 21, 2020
* Add null check to address #21263

#21263 is an issue many people are arriving at for a variety of reasons.  Since the code contains this logic on the following line:

```
      if (pageHeadings && pageHeadings.length) {
```

There should be no issue in seeing if `document.getElementById(`gatsby-focus-wrapper`) exists first before attempting to look up `getElementsByTagName`.

* Update packages/gatsby/cache-dir/navigation.js

Co-Authored-By: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>

* chore: format

Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
mxstbr added a commit that referenced this issue Apr 22, 2020
* fix(gatsby): Throw error on default export in gatsby-ssr/brows… (#23133)

* fix: Handle default export case

* heh

* fix comment

* chore(release): Publish

 - gatsby-cli@2.11.12
 - gatsby-plugin-sitemap@2.3.5
 - gatsby-recipes@0.0.9
 - gatsby-remark-prismjs@3.4.4
 - gatsby-theme-blog-core@1.3.27
 - gatsby-theme-blog@1.4.27
 - gatsby-theme-notes@1.2.26
 - gatsby@2.20.26

* fix(docs): Using-MDX link (#23288)

* fix(docs): Link to apollo blog (#23290)

* fix(docs): change gatsby-config mention for global CSS import (#23245)

* fix `gatsby-config` mention

* chore: format

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* docs: added details signifying that node fields can be arbitra… (#23106)

* added details signifying that node fields can be arbitrary

* Update docs/docs/data-fetching.md

Co-Authored-By: Kyle Gill <kylerobertgill@gmail.com>

* Update docs/docs/data-fetching.md

Co-Authored-By: Kyle Gill <kylerobertgill@gmail.com>

* removed empty line to fix failed linting tests

Co-Authored-By: Kyle Gill <kylerobertgill@gmail.com>

Co-authored-by: Kyle Gill <kylerobertgill@gmail.com>

* chore(gatsby): drop the the (#23295)

* chore(showcase): Add new sites built by Bejamas to showcase; c… (#23125)

* chore(sites): add new sites built by bejamas

* chore(creators): update bejamas cover

* chore(showcase):Add SofaScore Corporate web to showcase sites (#23128)

Co-authored-by: Mario Nikolaus <mario.nikolaus@sofascore.com>

* fix local links (#23149)

* chore(docs): Reference new ComponentModel component rather than generic LayerModel (#23241)

* Reference new ComponentModel component rather than generic LayerModel

* Remove use of t macro from layer models

* Half-fixing lingui code

* Revert "Half-fixing lingui code"

This reverts commit 64f052a.

* Remove Lingui from layer-model

* fix(www): fix sidebar (#23301)

* fix(www): fix sidebar

* Update sidebar.js

* fix(recipes): Fix shadow-file resource for scoped NPM packages & re-enable e2e testing for resources (#23274)

* fix(recipes): Fix shadow-file resource for scoped NPM packages

* WILL SLASH FIX WINDOWS???

* Add missing code block

* Try again

* hmmm joinPath maybe is the problem

* More fixes

* try reenabling tests

* disable colors in diffs

* Fix npm script test

* Why do these keep changing all the time??

* Use parsed value for the plan

* Disable Chalk colors on unit tests so match local ones

* Update packages/gatsby-recipes/src/providers/utils/get-diff.js

Co-Authored-By: John Otander <johnotander@gmail.com>

Co-authored-by: John Otander <johnotander@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* chore(release): Publish

 - gatsby-cli@2.11.13
 - gatsby-recipes@0.0.10
 - gatsby-theme-blog-core@1.3.28
 - gatsby-theme-blog@1.4.28
 - gatsby-theme-notes@1.2.27
 - gatsby@2.20.27

* chore(starters): add gatsby-starter-ecommerce (#23037)

* chore(starters): add gatsby-starter-ecommerce

* chore(starters): add gatsby-starter-ecommerce

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* Add site Interficie Internet Services (#23130)

* Add site Interficie Internet Services

* Correct JavaScript cammelcase

* Prettier format

Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* fix brand names (#23142)

* fix(blog): remove local domain (#23141)

* fix remove local domain

* fix local domain

* fix local domain

* fix remove local domain

* fix for linter

* Create paul scanlon 100 days of Gatsby blog post and add  assets (#23294)

* Create paul scanlon 100 days of Gatsby blog post and add  assets

* fix frontmatter

* fix frontmatter issue and ad relative links

* fix typos and spacing issues

* Update docs/blog/2020-04-20-paulie-scanlons-journey-of-100-days/index.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

Co-authored-by: Laurie Barth <laurie@LauriesrkLaptop.fios-router.home>
Co-authored-by: LB <laurie@gatsbyjs.com>

* Clarify prefix-paths variable. (#23309)

The line (one line, two places) I'm editing was copied from a comment in #21627 without the surrounding context. This edit provides that context.

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* chore(showcase):Add shreysachdeva.tech to showchase (#23032)

* Add shreysachdeva.tech to sites.yml

**Description**
Added the details of my personal website shreysachdeva.tech.

**Documentation**
No documentation

**Related Issues**
N/A

* chore: format

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com>

* fix(www): Fix sidebar expansion behavior (#23325)

* [gatsby-plugin-manifest] Generate a 32x32 favicon instead of generating from first manifest icon (#23077)

* Decouple favicons from manifest icons

* Update packages/gatsby-plugin-manifest/README.md

* Replace include_favicon undefined check with nullish coalescing operator

Co-Authored-By: Alex Moon <moonmeister@users.noreply.github.com>

* Assert gatsby-plugin-manifest generates favicon PNG (unless include_favicon option is false)

* Don't mock createContentDigest in gatsby-plugin-manifest's gatsby-ssr tests (to be consistent with gatsby-node tests)

* Tweak a comment

Co-authored-by: LB <laurie@gatsbyjs.com>
Co-authored-by: Alex Moon <moonmeister@users.noreply.github.com>

* Use mutations in Gatsby Admin

* Remove stray console.logs

* chore(gatsby-recipes): Update README typo (#23333)

Fixed typo in README.md

* fix(gatsby): Check for files before delete action when using GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES (#23219)

* Check for files before delete action

* fix lint issues

* fix lint issues and add return type to checkFolderHasContent

* rename check function

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* Install plugins as prod dependencies

* chore(release): Publish

 - gatsby-cli@2.11.14
 - gatsby-plugin-manifest@2.3.6
 - gatsby-recipes@0.0.11
 - gatsby-theme-blog-core@1.3.29
 - gatsby-theme-blog@1.4.29
 - gatsby-theme-notes@1.2.28
 - gatsby@2.20.28

* Add Besoegsvenner site to showcase (#23172)

* Add Besoegsvenner site to showcase

50.000 elderly people in Denmark feel lonely. This project seeks to inform people to become visitor friends ("Besøgsven" in Danish) to help fight loneliness and bring new friendships in to the world.

* Update sites.yml

Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* chore(benchmarks): Add Drupal data updater script to update benchmark data (#23242)

* Add Drupal data updater script to update benchmark data

* Remove console.log statement

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* Make TypeScript happy

* fix(gatsby): fix Uncaught TypeError in navigation.js (#23196)

* Add null check to address #21263

#21263 is an issue many people are arriving at for a variety of reasons.  Since the code contains this logic on the following line:

```
      if (pageHeadings && pageHeadings.length) {
```

There should be no issue in seeing if `document.getElementById(`gatsby-focus-wrapper`) exists first before attempting to look up `getElementsByTagName`.

* Update packages/gatsby/cache-dir/navigation.js

Co-Authored-By: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>

* chore: format

Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* Add support for file argument in remark plugins for gatsby-plugin-mdx (#21489)

* chore(gatsby-cli) Migrate remaining files in reporters/logger/ink to Typscript (#22782)

* Migrate remaining files in gatsby-cli/reporters/logger/ink to TS

* Rename "IProps" to something more contextual
Extend interface parameter individually instead of using utility

* Clean up after merging the redux master changes

Co-authored-by: Blaine Kasten <blainekasten@gmail.com>

* Fix Drupal data update script (#23349)

* Add noop data update scripts for all benchmarks (#23352)

* Add noop data update scripts for all CMS benchmarks

* Add data update to remainder of benchmarks

* chore(babel-preset-gatsby): Convert dependencies to TS (#22038)

Co-authored-by: Blaine Kasten <blainekasten@gmail.com>

* fix(gatsby): Improve error message when calling useStaticQuery without graphql (#23189)

* Add warning message for a long queries (#23261)

* Add warning message for a long queries

* Change timeout to 15 seconds

* Replace console with report

* Print out queryJob.componentPath instead of page.internalComponentName

* Add new info in the warning message

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

* refactor(gatsby): Convert inference metadata to TypeScript (#23264)

* refactor(inference-metadata): Convert to TypeScript

* Remove unused variable

* Forgot some types

* refactor(type-conflict-reporter): Node description

After tightening the original util function to return a string only, it
seemed sensible to convert that to use nullish coalescing. At that
point, seeing the function is only used in a single place and not
exported, I inlined it.

* refactor(inference-metadata): Interface renaming

* fix: Extract ValueType type

* refactor: Change type from unknown to object

* Corrected types, but left the code alone

* Removed redundant comments

* Update README.md (#23357)

* feat(gatsby-remark-images): support markdownCaptions in mdx + fix for remark (#21188)

* pass compiler to gatsby-remark-* plugins in the mdx plugin

* make getImageCaption async

* use async mdx compiler

* fix for using compiler

* don't mutate the node multiple times

* convert markdown ast to html ast

Co-authored-by: vladar

* chore(release): Publish

 - babel-preset-gatsby@0.3.4
 - gatsby-cli@2.11.15
 - gatsby-plugin-mdx@1.1.10
 - gatsby-recipes@0.0.12
 - gatsby-remark-images@3.2.5
 - gatsby-theme-blog-core@1.3.30
 - gatsby-theme-blog@1.4.30
 - gatsby-theme-notes@1.2.29
 - gatsby-transformer-remark@2.7.4
 - gatsby@2.20.29

* Fix lint errors

* Fix TypeScript unused declaration error

* Fix linting

Co-authored-by: Lennart <lekoarts@gmail.com>
Co-authored-by: Jeremy Albright <1935258+Js-Brecht@users.noreply.github.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Co-authored-by: Elijah <35966941+ElijahCano33@users.noreply.github.com>
Co-authored-by: Kyle Gill <kylerobertgill@gmail.com>
Co-authored-by: Peter van der Zee <209817+pvdz@users.noreply.github.com>
Co-authored-by: Michał Zieliński <zielinski-michal@outlook.com>
Co-authored-by: Mario Nikolaus <mnikolaus@users.noreply.github.com>
Co-authored-by: Mario Nikolaus <mario.nikolaus@sofascore.com>
Co-authored-by: Michael <184316+muescha@users.noreply.github.com>
Co-authored-by: Aisha Blake <aisha@gatsbyjs.com>
Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
Co-authored-by: John Otander <johnotander@gmail.com>
Co-authored-by: Lorenzo GM <dev@lorenzogm.com>
Co-authored-by: aperacaula <36845488+aperacaula@users.noreply.github.com>
Co-authored-by: Obinna Ekwuno <obinnacodes@gmail.com>
Co-authored-by: Michelle Gienow <michellegienow@gmail.com>
Co-authored-by: Laurie Barth <laurie@LauriesrkLaptop.fios-router.home>
Co-authored-by: LB <laurie@gatsbyjs.com>
Co-authored-by: Alex Fornuto <github@alexf.co>
Co-authored-by: Shrey Sachdeva <shreysachdeva.2000@gmail.com>
Co-authored-by: Nat Alison <1278991+tesseralis@users.noreply.github.com>
Co-authored-by: Owen <owen@dangerfarms.com>
Co-authored-by: Alex Moon <moonmeister@users.noreply.github.com>
Co-authored-by: Marcus Lyons <10541922+marcuslyons@users.noreply.github.com>
Co-authored-by: Stuart Rayson <stuart.a.rayson@gmail.com>
Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
Co-authored-by: Jacob Packert <jacobpackert@gmail.com>
Co-authored-by: Shane Thomas <shane@codekarate.com>
Co-authored-by: nick shook <nick@shook.family>
Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Arthur <arthur@mediamonks.com>
Co-authored-by: Blaine Kasten <blainekasten@gmail.com>
Co-authored-by: Nicholas Duffy <duffn@outlook.com>
Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
Co-authored-by: Rebenkov Aleksey <rebenkovaleksey@yandex.ru>
Co-authored-by: Ross Hendry <rhendry@googlemail.com>
Co-authored-by: Khaled Garbaya <khaled@contentful.com>
Co-authored-by: Mathieu Dutour <mathieu@dutour.me>
Co-authored-by: Sidhartha Chatterjee <me@sidharthachatterjee.com>
johno pushed a commit to johno/gatsby that referenced this issue Apr 23, 2020
* Add null check to address gatsbyjs#21263

gatsbyjs#21263 is an issue many people are arriving at for a variety of reasons.  Since the code contains this logic on the following line:

```
      if (pageHeadings && pageHeadings.length) {
```

There should be no issue in seeing if `document.getElementById(`gatsby-focus-wrapper`) exists first before attempting to look up `getElementsByTagName`.

* Update packages/gatsby/cache-dir/navigation.js

Co-Authored-By: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>

* chore: format

Co-authored-by: Vladimir Razuvaev <vladimir.razuvaev@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

Successfully merging a pull request may close this issue.