WebpackError：窗口未定义

Question

我在这里遇到了同样的问题，Coverflow 对 gatsby 开发工作正常，但对于构​​建它会抛出一个错误：WebpackError: window is not defined

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

也就是说——潜在地，您可以导入您的包或window在您的组件的componentDidMount方法（或useEffect钩子）中查找的任何内容。