TypeError: _ref2 is undefined in TransitionLink

[shivamsingha]

I'm using the react-spring example and I get this error:

./node_modules/gatsby-plugin-transition-link/components/TransitionLink.js/</TransitionLink</<
node_modules/gatsby-plugin-transition-link/components/TransitionLink.js:60

  57 |   },
  58 |   __self: this
  59 | }, function (_ref2) {
> 60 |   var disableAnimation = _ref2.disableAnimation,
  61 |       context = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["disableAnimation"]);
  62 |   return _react.default.createElement(_gatsby.Link, (0, _extends2.default)({
  63 |     style: style,

Here's my code:

const SpringComp = ({ children }) => (
  <TransitionState>
    {({ transitionStatus, exit, entry }) => {
      const mount = ['entering', 'entered'].includes(transitionStatus)
      const seconds = mount ? entry.length : exit.length

      return (
        <Spring
          to={{
            transform: `translateY(${mount ? 0 : '100px'})`,
            opacity: mount ? 1 : 0,
          }}
          config={{
            duration: seconds * 1000,
          }}
        >
          {children}
        </Spring>
      )
    }}
  </TransitionState>
)

const SpringLink = ({ to, children }) => (
  <TransitionLink to={to} exit={{ length: 1 }} entry={{ length: 1 }}>
    {children}
  </TransitionLink>
)

[meesrutten]

I have the same issue. Just created a fresh Gatsby project, followed the installation guide and tried to add some of the examples but all gave this error: TypeError: Cannot read property 'disableAnimation' of undefined (anonymous function) node_modules/gatsby-plugin-transition-link/components/TransitionLink.js:60

edit: I ran gatsby clean, gatsby build and then ran gatsby develop again and it works!

[shivamsingha]

gatsby clean doesn't solve my problem.

[Grady-Saccullo]

Also having the same issue with a fresh build of Gatsby.

[DRD161]

Same here. Like others mentioned I am using Gatsby along with styled components and followed the installation guide with no luck thus far. Hopefully this gets resolved soon so I can get some simple page transitions going.

[AndreBClark]

Same issue, build fails on my blog post using markdown during production build gatsby build.

• gatsby clean doesn't help,
  • everything works fine on gatsby develop
  • I even tried removing any transitionLink or AniLink components on that template .
  • I am not currently using "DisableAnimation" just paintDrip with a hex color

using: gatsby 2.19.12 gatsby-plugin-transition-link 1.17.7 gsap 3.1.1 styled components 5.0.1 not using react-spring

success run queries - 66.739s - 12/12 0.18/s
11:45:30 AM: failed Building static HTML for pages - 7.251s
11:45:30 AM: error Building static HTML failed for path "/colorable-color-contrast-tool/"
11:45:30 AM:   58 |     __self: this
11:45:30 AM:   59 |   }, function (_ref2) {
11:45:30 AM: > 60 |     var disableAnimation = _ref2.disableAnimation,
11:45:30 AM:      |                                  ^
11:45:30 AM:   61 |         context = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["disableAnimation"]);
11:45:30 AM:   62 |     return _react.default.createElement(_gatsby.Link, (0, _extends2.default)({
11:45:30 AM:   63 |       style: style,
11:45:30 AM: 
11:45:30 AM:   WebpackError: TypeError: Cannot read property 'disableAnimation' of undefined
11:45:30 AM:   
11:45:30 AM:   - TransitionLink.js:60 Object.children
11:45:30 AM:     node_modules/gatsby-plugin-transition-link/components/TransitionLink.js:60:3    4

additional context:

• my gatsby site's repo
• my package.json file
• a markdown file with the netlify build log

Edit:

I forgot to add 'gatsby-plugin-transition-link' to gatsby config 🤦‍♂ once added, my issue was resolved

[TylerBarnes]

🤔 does that solve the problem for anyone else with this issue? I haven't had time to work on TL lately :(

If the issue is that TL isn't in gatsby-config, we should throw a more useful error.

[DRD161]

In my case I did have it in gatsby-config :/

[TylerBarnes]

I pulled down the example and upgraded the example's Gatsby packages. Running gatsby develop is working, so some of you may have caught a bug that was fixed in a later version. If you're experiencing this issue please try upgrading to the latest gatsby and gatsby-plugin-transition-link. If you're using yarn, you can run yarn upgrade-interactive --latest to get an interactive select UI to upgrade your packages. If that doesn't solve it, please post a minimal reproduction repo so I can pull it down and have a look.

Thanks all!

[TylerBarnes]

Oh one more thing! I pushed the update in the example repo to master, so you should be able to try it out there as well.

[shivamsingha]

I updated the packages but the error persists. Please take a look at my [repo]()

I'm kinda new to react so I might just be doing something wrong.

[TylerBarnes]

Thanks for sharing your repo @shivamsingha! I pulled it down, switched the transition-link branch, and don't have any transition-link specific errors, but you do have a react-spring problem. You're passing children to <Spring> but it expects to be passed a function. Change this:

            <Spring
              to={{
                transform: `translateY(${mount ? 0 : '100px'})`,
                opacity: mount ? 1 : 0
              }}
              config={{
                duration: seconds * 1000
              }}
            >
              {children}
            </Spring>

To this:

            <Spring
              to={{
                transform: `translateY(${mount ? 0 : '100px'})`,
                opacity: mount ? 1 : 0
              }}
              config={{
                duration: seconds * 1000
              }}
            >
             {props => <div style={props}>hello</div>}
            </Spring>

https://www.react-spring.io/docs/props/spring

Or alternatively, wherever you're using your MySpring component, you need to pass a function as children to it instead of passing components as children.

If you're still seeing errors related to transition-link, delete your yarn.lock and node_modules then run yarn again and you should be good.

[TylerBarnes]

I believe some of you are experiencing a bug in an outdated version of transition-link. Please upgrade to the latest version. I'm going to close this issue, but feel free to comment here if you need more help.

[shivamsingha]

I changed {children} to

{() => <>{children}</>}

But now the animation doesn't work properly anymore. So I guess I can't do it the way I'm trying to. Thanks for your help.

[TylerBarnes]

@shivamsingha , you'll need to read more about how react-spring works. The function you pass to it receives props from the Spring component that you need to wire up to your components. Check the example I posted above or read the react-spring docs. I believe LevelUpTuts has a good react-spring course as well. That's off topic here though, so you'll need to do some learning elsewhere. Hopefully that helps get you unstuck tho!