带有Gatsby js的Scrollmagic，部署时未定义窗口

Question

由于WebpackError: ReferenceError: window is not defined，我的Gatsby网站无法部署到Netlify

我尝试过：

1. if(window !== undefined)检查中包装的返回语句无效）>
2. 在我的index.js中放入一个require语句：

   if (typeof window !== 'undefined') {
   require('scrollmagic')
   require('scrollmagic-plugin-gsap')
   }

   无效

[我注意到导入语句import Scrollmagic from 'scrollmagic'已经引起了错误，因为我曾经尝试部署除导入以外没有任何滚动魔术代码的站点。

我组件的scrollmagic部分看起来像这样（在此示例中，我删除了一些不相关的变量赋值）：

import React, { useRef, useEffect } from 'react'
import ScrollMagic from "scrollmagic"
import { TweenMax, TimelineMax, Power3, TweenLite, TimelineLite } from "gsap"
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

const Techstack = () => {
  ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

  const techs = useRef()
  const trigger = useRef()


  useEffect(() => {
    let controller = new ScrollMagic.Controller()
    const techitems = techs.current.children
    const tl = new TimelineMax
    for (let i = 0; i < techitems.length; i++) {
      new ScrollMagic.Scene({
        triggerElement: techitems[i],
      })
        .setTween(TweenLite.from(techitems[i], 1, { opacity: 0, x: -300, ease: Power3.easeOut }))
        .addTo(controller)
    }
  }, [])


    return (
      <TechstackContainer ref={trigger} id="trigger">
        <ContentWrapper ref={techs}>
          <StyledTechstackText>
            Ich baue Webseiten und Apps, am liebsten mit:
        </StyledTechstackText>
          {stack.map(el => {
            return <TechItem>{el}</TechItem>
          })}
        </ContentWrapper>
      </TechstackContainer>
    )
}

我将如何处理？

由于WebpackError：ReferenceError：窗口未定义，我的Gatsby站点无法部署到Netlify我已经尝试过：在if（window！== undefined）检查中包装返回语句，但没有...

Answer 1

我看不到您在代码上调用window的位置，但是解决所有问题的方法是在使用window渲染组件后延迟componentDidMount调用（在基于类的组件中）或useEffect（基于无状态的组件中具有空的部门（[]））。因此，您需要执行以下操作：