Javascript Scrollmagic与Gatsby js和部署时未定义的窗口

“我的盖茨比网站”无法部署到Netlify，因为

WebPackageError:ReferenceError:未定义窗口

我试过：

将返回语句包装在

if（window！==undefined）

中，检查哪些语句不起作用

在my index.js中放入require语句：

if（typeof window！=='undefined'）{
需要（'scrollmagic'）
需要（'scrollmagic-plugin-gsap'）
}

哪个不起作用

我注意到import语句

import Scrollmagic from'Scrollmagic'

已经导致了错误，因为我曾经尝试在没有任何Scrollmagic代码的情况下部署站点，除了导入之外

我的组件的scrollmagic部分如下所示（我在本例中删除了一些不相关的变量赋值）：

import React，{useRef，useffect}来自“React”
从“ScrollMagic”导入ScrollMagic
从“gsap”导入{TweenMax、TimelineMax、Power3、TweenLite、TimelineLite}
从“scrollmagic插件gsap”导入{ScrollMagicPluginGsap}；
常量Techstack=（）=>{
ScrollMagicPluginGsap（ScrollMagic、TweenMax、TimelineMax）；
const techs=useRef（）
const trigger=useRef（）
useffect（（）=>{
让controller=new ScrollMagic.controller（）
const techitems=techs.current.children
常数tl=新的时间线最大值
for（设i=0；i{
返回{el}
})}
)
}

---

我该怎么做呢？

我看不出在代码上调用

窗口的位置，但解决所有问题的方法是在使用
componentDidMount
（在基于类的组件中）或带有空dep（
[]
）的
useffect
呈现组件后延迟
窗口的调用在基于无状态的组件中。因此，您需要做如下操作：

  useEffect(() => {
    if(typeof window !== undefined){
      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)
      }
    }
  }, [])

根据盖茨比文件：

一种解决方案是自定义您的网页包配置以替换
在服务器渲染过程中使用虚拟模块导致模块出错

来源：
非常感谢您的回复。节点模块中的Scrollmagic正在执行
窗口
位。在ScrollMagic.js的相应行中，有一行单独的代码导致了问题：window.addEventListener（“mouseweel”，function（）{}）；然而，我不知道如何处理这个问题。我也试着用if检查来包装它，但是部署失败了。哦，这改变了@flooz的一切。对不起，误会了。考虑到这一点，我编辑了我的答案。：）再次非常感谢。到目前为止，这段代码还不起作用，我尝试了所有方法来指定Scrollmagic模块的正确路径。这至少是一个很好的提示，下一步要检查什么，所以再次感谢。我会继续努力的。干杯，我现在犯了一个不同的错误。这很好！第一个错误终于解决了，现在我可以开始处理下一个错误了。再次感谢你的耐心！
  useEffect(() => {
    if(typeof window !== undefined){
      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)
      }
    }
  }, [])

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig, stage }) => {
  const config = getConfig();

  config.module.rules = [
    // Omit the default rule where test === '\.jsx?$'
    ...config.module.rules.filter(
      rule => String(rule.test) !== String(/\.jsx?$/)
    ),

    // Recreate it with custom exclude filter
    {
      ...loaders.js(),

      test: /\.jsx?$/,

      // Exclude all node_modules from transpilation, except for 'swiper' and 'dom7'
      exclude: modulePath =>
        /node_modules/.test(modulePath)
    },
  ];

  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
};