Gatsby not loading useEffect function in production

user_13025135 0
Viewed 1478

I'm creating a website using Gatsby.js. In my component, I'd created animation using Gsap, inside useEffect function.

While debugging, all works. In production the useEffect function not running, what follows to not showing animations.

What I should do? Any ideas?

Thanks for answers!

My component:

import React, { useRef, useEffect } from "react"
import styled from "styled-components"
import gsap from "gsap"
import WhatEver from "../../../static/whatever.svg"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import scrollTo from 'gatsby-plugin-smoothscroll';


const HeaderWrapper = styled.header`
  width: 100%;
  height: 100vh;
  min-height: 150px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: rgb(255, 216, 41);
`

const HeaderButton = styled.button`
  display: block;
  margin: 40px auto;
  border: 2px solid #000000;
`

const HeaderComponent = () => {

  const animWrapper = useRef(null)

  useEffect(() => {

    const [elements] = animWrapper.current.children

    const what = elements.getElementById('What')
    const ever = elements.getElementById('Ever')
    const button = document.getElementById('header-button')
    const icon = document.getElementById('header-icon')

    const whatChildrens = what.children
    const everChildrens = ever.children
    const allChildrens = [...whatChildrens, ...everChildrens]

    gsap.set([...allChildrens, button], { autoAlpha: 0 })

    const timeLine = gsap.timeline({ defaults: { ease: 'power3.inOut' } })

    timeLine
      .to(whatChildrens, { autoAlpha: 1, duration: 0.75 })
      .to(everChildrens, { autoAlpha: 1, stagger: 0.025 })
      .to(button, { autoAlpha: 1 })
  }, [])

  return (
      <HeaderWrapper className="header" id="main-header">
        <div ref={animWrapper} id="header-logo-wrapper">
          <WhatEver style={{width: '100%'}}/>

          <HeaderButton id="header-button" onClick={() => scrollTo('#poznaj-nas')}>
            <FontAwesomeIcon icon={faArrowDown} id="header-icon"/>
          </HeaderButton>
        </div>
      </HeaderWrapper>
  )
}

export default HeaderComponent
gsap gatsby reactjs javascript
2 Answers

I think what is happening is that the gsap library is getting tree shaken out of the production build. I would either try adjusting your webpack settings to make sure that it is not removed, or include it like this instead:

const gsap = require("gsap")

Which in my experience has prevented libraries from being tree shaken out.

user_77582670

I was facing this issue and it got resolved just by following the steps:

  1. If you are trying to open the html directly without any web server then useEffect won't be called.

  2. Only way to solve this issue is by running a webserver and serve the html from the server.

I am using a mac system so run the python server using the command inside the public folder:

python -m SimpleHTTPServer 8000

then open it using localhost:8000

user_48919040
Related