CODEWITHSUNDEEP
javascriptgatsby
Chylomicron
Chylomicron

Reputation: 251

Gatsby + Auth0 giving SyntaxError: Failed to execute 'querySelector' on 'Document'

I'm following this guide on implementing auth0 into a Gatsby app: https://auth0.com/blog/securing-gatsby-with-auth0/

However, on the callback screen, I am getting the following error:

SyntaxError: Failed to execute 'querySelector' on 'Document': '#access_token=...

coming from

ScrollHandler._this.scrollToHash
src/app/www/frontend/node_modules/gatsby-react-router-scroll/scroll-handler.js:52
  49 | };
  50 | 
  51 | _this.scrollToHash = function (hash, prevProps) {
> 52 |   var node = document.querySelector(hash);
  53 | 
  54 |   if (node && _this.shouldUpdateScroll(prevProps, _this.props)) {
  55 |     node.scrollIntoView();
View compiled
ScrollHandler.componentDidMount
src/app/www/frontend/node_modules/gatsby-react-router-scroll/scroll-handler.js:89
  86 |   if (scrollPosition) {
  87 |     this.windowScroll(scrollPosition, undefined);
  88 |   } else if (hash) {
> 89 |     this.scrollToHash(decodeURI(hash), undefined);
  90 |   }
  91 | };
  92 |

The line that I believe is causing the problem is auth.parseHash(setSession()) in the auth.js file from the tutorial.

This function, parseHash, takes hash as an input according to this page: https://auth0.com/docs/libraries/auth0js/v9

But scrollToHash in scroll-handler.js does the same, so it looks like scroll-handler is trying to use the wrong information in querySelector.

While I think that's the source of the problem, I'm not sure how to go about solving it. On the callback page, I shouldn't need a scroll handler because the only thing on the page is some text saying 'Loading...' Is it possible I can disable that function for that page? Alternatively I'm not sure if I can get the code to not use the wrong hash variable.

Upvotes: 1

Views: 141

Answers (1)

ehrencrona
ehrencrona

Reputation: 6982

This is a bug in Gatsby that was fixed in a very recent PR.

The problem is it interprets the hash from Auth0 as an anchor tag to scroll to but then fails because it contains characters that an anchor tag could never have (probably dashes).

If you update to the newest Gatsby (or any version after 2.23.7) it should be fixed.

Upvotes: 1

Related Questions