search

TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 70 forks source link

TypeError: Cannot read property 'getElementsByTagName' of null #204

Open mattandryc opened 4 years ago

mattandryc commented 4 years ago

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 (

about 
);

};`

persocon commented 4 years ago

same :/

lcestou commented 4 years ago

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 commented 4 years ago

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

TylerBarnes commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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