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

Cyanide

@TomOakley ready! – Succor

how do you know the useEffect hook isn't running? have you added a console.log or used the debugger to establish that? is it possible it's running but the content inside the function isn't working in production? – Harts

Yes, i've added console.log. Console logs during development, but not in production. – Succor

so can we disregard gsap for now, as it just adds confusion? the core issue is useEffect not working in production, right? – Harts

there might be a component/render issue (maybe in an import) that only warns in dev mode, but fails in dev mode so the component never runs/renders? – Harts

Yes, we can ignore what is in function for now. In dev mode i'm not see any warns, or errors. For now, I assume the useEffect must be performed somehow differently, but I don't know how. Logically speaking, this is the only option – Succor

hmm, that's so odd. Have you tried removing stuff from the returned JSX? can you reproduce on codepen.io (or similar)? – Harts

Yes, i'm tried remove elements from return. – Succor

I don't know what else to suggest, I guess open an issue on their repo? github.com/gatsbyjs/gatsby/issues – Harts

@ŁukaszStrzeboński are there any errors in console? – Odine

Answer 1

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.

Cottony

Answer 2

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

Torrent