TypeError: Cannot read property 'getElementsByTagName' of null

[mattandryc]

AniLink breaking in Gatsby 2.20.18. I've checked my dependencies and re-installed node modules. Breaks when default animation (i.e. fade) is added in props.

// package.json "dependencies": { "babel-plugin-styled-components": "^1.10.6", "gatsby": "^2.20.18", "gatsby-image": "^2.3.2", "gatsby-plugin-i18n": "^1.0.1", "gatsby-plugin-sharp": "^2.2.8", "gatsby-plugin-styled-components": "^3.1.2", "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-transition-link": "^1.12.4", "gatsby-remark-images": "^3.2.2", "gatsby-source-filesystem": "^2.2.2", "gatsby-transformer-remark": "^2.7.1", "gatsby-transformer-sharp": "^2.2.4", "gsap": "^2.1.3", "react": "^16.8.6", "react-dom": "^16.8.6", "react-intl": "^4.3.1", "react-pose": "^4.0.8", "rebass": "^3.1.1", "smooth-scroll": "^16.1.3", "styled-components": "^4.3.2", "theme-ui": "^0.3.1", "typeface-roboto": "0.0.75" }, "scripts": { "develop": "gatsby develop", "serve": "gatsby serve", "build": "gatsby build" } }

// error message TypeError: Cannot read property 'getElementsByTagName' of null (anonymous function) /Users/matt/Projects/portfolio/.cache/navigation.js:174 171 | if (document.title) { 172 | pageName = document.title 173 | }

174 | const pageHeadings = document 175 | .getElementById(gatsby-focus-wrapper) 176 | .getElementsByTagName(h1) 177 | if (pageHeadings && pageHeadings.length) { View compiled This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

usage const MyLink = () => { return ( <AniLink fade to='about'> about </AniLink> ); };

[persocon]

same :/

[lcestou]

I love the plugin <3

I keep coming back to check also if this was resolved as I have been putting off updating my site :(

[mattandryc]

@TylerBarnes is there any more info I can provide or is there a good spot I can start digging for a workaround?

[TylerBarnes]

Hey everybody! So sorry for the extremely delayed response here. It's been really hard to find time to work on this package. I just tried this out with the example repo on latest Gatsby & latest TL and it appears to be working. Can you try again on latest as of today and see if it's working now?

If not can you provide a reproduction repo so I can have a look?

Thanks!

[mattandryc]

@TylerBarnes no worries. Strangely, I can't seem to install any version after 1.18.0.

after

npm i gatsby-plugin-transition-link gatsby develop

I meet the following error:

ERROR #98124 WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'gatsby-plugin-transition-link/AniLink' in '/Users/matt/Projects/my-default-starter/src/pages'

If you're trying to use a package make sure that 'gatsby-plugin-transition-link/AniLink' is installed. If you're trying to use a local file make sure that the path is correct.

File: src/pages/index.js

Here's a gatsby-default-starter repo that repros the issue: https://github.com/mattandryc/gatsby-plugin-transition-link-issue-204

[TylerBarnes]

Hey @mattandryc, that was my bad. I published a new version for the first time in a long time and I did it wrong. Upgrade to 1.20.0 for a working release https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/218