I’m currently working on a little side-project called StrangeNewPlaces.org where I’m using Hugo as the main content-framework. That being said, I wanted to have a few dynamic areas on that page that should be loaded via JavaScript and eventually using React.
But having your whole React-app being re-initialised on every page-load would be really bad. Luckily, a couple of months ago I stumbled onto Turbolinks thanks to this great post on changelog.com. With this I hoped to keep for instance an account-box unchanged while the rest of the content is loaded via AJAX and inserted the DOM.
Turns out, integrating Turbolinks is extremely easy but nearly immediately I still ran into a small problem. Whenever I navigated from one page to another, I was greeted by a blank page and something like this showing up in the browser’s JS console:
turbolinks.js:5 Uncaught TypeError: Cannot read property 'querySelector' of null
at n.t.SnapshotRenderer.n.findFirstAutofocusableElement (turbolinks.js:5)
at n.t.SnapshotRenderer.n.focusFirstAutofocusableElement (turbolinks.js:5)
at turbolinks.js:5
Sadly, I couldn’t find any usable information about this so I decided to
experiment with various Hugo flags. Seems like the live-reload feature is
injecting some JavaScript into the page that prevents Turbolinks from working
properly. If I just start Hugo with hugo serve --disableLiveReload everything
works fine.
That’s not an ideal solution by any means, but for now it’s enough 🙂
Do you want to give me feedback about this article in private? Please send it to comments@zerokspot.com.
Alternatively, this website also supports Webmentions. If you write a post on a blog that supports this technique, I should get notified about your link 🙂