Cannot tween a null target error with AniLink

[aamorozov]

I've been seeing this issue on one type of the template in my gatsby project. If I reload the page it works and the error is gone. I'll debug more to see if there is anything specific to the template causing this error.

Note: The pages are working without any errors when navigating to them directly, so the issue is directly related to actual routing within TransitionLink.

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.6.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0
  npmPackages:
    gatsby: 2.0.85 => 2.0.85
    gatsby-image: 2.0.25 => 2.0.25
    gatsby-plugin-favicon: 3.1.5 => 3.1.5
    gatsby-plugin-flow: 1.0.2 => 1.0.2
    gatsby-plugin-force-trailing-slashes: 1.0.4 => 1.0.4
    gatsby-plugin-jsxstyle: 0.0.4 => 0.0.4
    gatsby-plugin-manifest: 2.0.13 => 2.0.13
    gatsby-plugin-offline: 2.0.20 => 2.0.20
    gatsby-plugin-react-helmet: 3.0.5 => 3.0.5
    gatsby-plugin-sharp: 2.0.17 => 2.0.17
    gatsby-plugin-transition-link: 1.4.5 => 1.4.5
    gatsby-source-filesystem: 2.0.12 => 2.0.12
    gatsby-source-graphql: 2.0.8 => 2.0.8
    gatsby-transformer-json: 2.1.6 => 2.1.6
    gatsby-transformer-sharp: 2.1.10 => 2.1.10
  npmGlobalPackages:
    gatsby-cli: 2.4.6
    gatsby: 2.0.67

[aamorozov]

Looks like it's being thrown from here https://github.com/greensock/GreenSock-JS/blob/master/src/esm/TweenLite.js#L900, but not sure at the moment what is causing the issue.

[TylerBarnes]

I played around and I believe this is from pressing back in the browser while an animation is happening. I think I'll add a check to see if the dom node exists before running the trigger functions and that should prevent this.

[aamorozov]

I was able to debug it in my app - it was caused by the bug in one of the randomize functions that had caused the template to re-render before the transition to the next page occurred. I think it is a bit of an edge case but should be worth to add a check for that

[TylerBarnes]

@aamorozov upgrade to v1.4.7 for a fix. If you're still having issues please reopen this.

[angelod1as]

I'm having the same problem.

When I link from my main page to a second page, which generates a list of posts from my markdown, the transition works perfectly. When I click on one of those links to the post in question (generated from the markdown itself), the transition doesn't happen and the site breaks.

When I use Gatsby's Link, it goes right.

I tested this on development and public build.

You can see the (unfinished) project here. The error happens from src/fragments/Portfolio/index.js to src/fragments/Item/index.js (or template portfolio.js to item.js)

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^2.13.3",
    "gatsby-image": "^2.2.4",
    "gatsby-plugin-manifest": "^2.2.1",
    "gatsby-plugin-netlify-cms": "^4.1.1",
    "gatsby-plugin-offline": "^2.2.0",
    "gatsby-plugin-react-helmet": "^3.1.0",
    "gatsby-plugin-sharp": "^2.2.2",
    "gatsby-plugin-transition-link": "^1.12.4",
    "gatsby-source-filesystem": "^2.1.2",
    "gatsby-transformer-remark": "^2.6.0",
    "gatsby-transformer-sharp": "^2.2.1",
    "gsap": "^2.1.3",
    "netlify-cms-app": "^2.9.5",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-reveal": "^1.2.2",
    "styled-components": "^4.3.2",
    "styled-normalize": "^8.0.6",
    "styled-reset": "^2.0.16",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.2",
    "prettier": "^1.18.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

[trickydisco78]

Having this same issue in 1.9.1