reactjs - Webpack错误: window is not defined

Question

我在这里遇到了同样的问题，Coverflow 对于 gatsby 开发工作正常，但对于构​​建它会抛出错误:WebpackError:窗口未定义

WebpackError:窗口未定义

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

我认为这是由这个库“Coverflow”引起的

import Coverflow from 'react-coverflow';
import { StyleRoot } from 'radium'

class Team extends React.Component {

  render(){
    return(
      <StyleRoot>
      <Coverflow
        displayQuantityOfSide={2}
        navigation
        infiniteScroll
        enableHeading
        active={0}
        media={{
          '@media (max-width: 720px)': {
            width: '100%',
            height: '200px'
          },
          '@media (min-width: 720px)': {
            width: '100%',
            height: '400px',
          }
        }}
      >
        <img src={Sandiso} alt='Chairperson'/>
        <img src={Sihle} alt='Deputy Chairperson' />
        <img src={olwethu} alt='General Secretary' />
        <img src={Aphiwe} alt='Recording Secretary'/>
        <img src={cynoh} alt='Treasury'/>
        <img src={aso} alt='Marketing' />

      </Coverflow>
    </StyleRoot>
    )
  }
}

export default Team;

Answer 1

还没有完全研究其他建议的答案:React.Lazy 和 Suspense，但在尝试实例化 Intersection Observer 时遇到了类似的问题，并在 Kyle Matthew 对此问题的回应中找到了一个更简单的答案:

https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-223360361

也就是说，您可以导入您的包或在 componentDidMount 方法(或 useEffect Hook )中查找 window 的任何内容您的组件。