Gatsby not loading useEffect function in production

Question

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

Answer 1

我认为正在发生的事情是 gsap 库正在从生产版本中剔除。我要么尝试调整你的 webpack 设置以确保它不会被删除，要么像这样包含它：

const gsap = require("gsap")

根据我的经验，这可以防止图书馆被摇晃。