Closed shivamsingha closed 4 years ago
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!
gatsby clean
doesn't solve my problem.
Also having the same issue with a fresh build of Gatsby.
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.
Same issue, build fails on my blog post using markdown during production build gatsby build
.
gatsby clean
doesn't help,
gatsby develop
transitionLink
or AniLink
components on that template .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:
I forgot to add 'gatsby-plugin-transition-link'
to gatsby config 🤦♂
once added, my issue was resolved
🤔 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.
In my case I did have it in gatsby-config :/
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!
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.
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.
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.
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.
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.
@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!
I'm using the react-spring example and I get this error:
Here's my code: