Links aren't loading
tudorsaitoc opened this issue · comments
Describe the bug
When developing or building the site, the links (home, experience, skills, about me) are loading up a white page. The browser seems to be pointing to the correct link but doesn't load anything. If I manually complete the request, the pages are build and load perfectly fine.
To Reproduce
I've include a version of the live site, just click on the hamburger menu bar and see if it works for you below:
+1. I just configured the website, using the exact same config from readme. Basically, I'm on a clean slate at the moment, with no changes whatsoever. All links load just a white page, however, if we manually type the address in the addressbar, the links load.
The browser console floods with these as soon as we click on a link:
PaintDrip.js:68 Uncaught TypeError: _gsap.default.timeline is not a function
at PaintDrip.<anonymous> (PaintDrip.js:68)
at trigger (PaintDrip.js:181)
at exitTrigger (triggerTransition.js:93)
at onExit (onExit.js:26)
at Object.onExit (TransitionHandler.js:127)
at Transition.performExit (Transition.js:318)
at Transition.performExit (react-hot-loader.development.js:714)
at Transition.updateStatus (Transition.js:260)
at Transition.updateStatus (react-hot-loader.development.js:714)
at Transition.componentDidUpdate (Transition.js:220)
at Transition.componentDidUpdate (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:19835)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at commitRoot (react-dom.development.js:22381)
at finishSyncRender (react-dom.development.js:21807)
at performSyncWorkOnRoot (react-dom.development.js:21793)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at scheduleUpdateOnFiber (react-dom.development.js:21199)
at Object.enqueueSetState (react-dom.development.js:12639)
at LocationProvider../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
at index.js:103
The above error occurred in the <Transition> component:
in Transition (at delayTransitionRender.js:30)
in DelayedTransitionWrapper (at TransitionHandler.js:46)
in TransitionGroup (at TransitionHandler.js:45)
in div (at TransitionHandler.js:44)
in Location (at TransitionHandler.js:42)
in TransitionHandler (at wrap-page.js:9)
in div (at layout/index.js:49)
in div (at layout/index.js:48)
in _default (at Layout.js:30)
in LayoutComponent (at wrap-page.js:8)
in PageRenderer (at query-result-store.js:86)
in PageQueryStore (at root.js:56)
in RouteHandler (at root.js:78)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by EnsureResources)
in ScrollContext (at root.js:69)
in RouteUpdates (at root.js:68)
in EnsureResources (at root.js:66)
in LocationHandler (at root.js:124)
in LocationProvider (created by Context.Consumer)
in Location (at root.js:123)
in Root (at root.js:131)
in InternalProvider (at wrap-root.js:5)
in StaticQueryStore (at root.js:138)
in _default (at app.js:67)
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
Uncaught TypeError: _gsap.default.timeline is not a function
at PaintDrip.<anonymous> (PaintDrip.js:68)
at trigger (PaintDrip.js:181)
at exitTrigger (triggerTransition.js:93)
at onExit (onExit.js:26)
at Object.onExit (TransitionHandler.js:127)
at Transition.performExit (Transition.js:318)
at Transition.performExit (react-hot-loader.development.js:714)
at Transition.updateStatus (Transition.js:260)
at Transition.updateStatus (react-hot-loader.development.js:714)
at Transition.componentDidUpdate (Transition.js:220)
at Transition.componentDidUpdate (react-hot-loader.development.js:704)
at commitLifeCycles (react-dom.development.js:19835)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at commitRoot (react-dom.development.js:22381)
at finishSyncRender (react-dom.development.js:21807)
at performSyncWorkOnRoot (react-dom.development.js:21793)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at scheduleUpdateOnFiber (react-dom.development.js:21199)
at Object.enqueueSetState (react-dom.development.js:12639)
at LocationProvider../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
at index.js:103
...and a few more.
Hey @tudorsaitoc,
@tudorsaitoc , @Hrishikesh-K ,
Try this out,
npm i gsap
@ta-khac-cong Yeah, that fixes it! Thanks a lot!
Installed gsap with npm. Then got errors with gatsby develop:
There was a problem loading the local develop command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you need to run "npm install"? You might need to delete your "package-lock.json" as well.
Had to update gatsby cli with yarn and it works!
[UNRELATED] Isn't it recommended to use npm or yarn, not both? Could you install gsap with yarn?
Hey, @tudorsaitoc
You can use whatever you want. But I prefer yarn because many blogs say that yarn is faster than npm.
Thanks.
Hey @tudorsaitoc ,
Ain't you familiar with NodeJS?
As I said, you can use whatever you want. If you use npm for your project, then use npm i gsap.
And if you use yarn for your project, then use yarn add gsap.
Not that different. It depends on you.
Thanks.
Thank you @tudorsaitoc for reporting the problem, and thank you @tkCong for finding a solution