WebpackError: window is not defined

Question

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

WebpackError: window 未定义

     - 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-coverflow' 可能期望自己在浏览器上是 运行，这就是为什么 gatsby 试图在服务器端呈现组件时对你大喊大叫。如果您使用的是 react^16.6 附带的 Gatsby v2，您可以使用 React 的 lazy 和 Suspense 组合动态加载组件：

// src/components/coverflow.js
import React from 'react'
import Coverflow from 'react-coverflow'

export default () => (
  <Coverflow>
    {/* your coverflow setup */}
  </Coverflow>
)

然后你可以像这样在页面上延迟加载组件：

// src/pages/index.js

const LazyCoverflow = () => {
  if (typeof window === 'undefined') return <span>loading...</span>
  const Component = lazy(() => import('../components/coverflow'))
  return (
    <>
      <Suspense fallback={<span>loading...</span>}>
        <Component />
      </Suspense>
    </>
  )
}

export default () => (
  <Layout>
    {/* other components */}
    <LazyCoverflow />
  </Layout>
)

查看 reactjs.org 上的 lazy & Suspense doc。

Answer 2

还没有完全研究另一个建议的答案：React.Lazy 和 Suspense，但是 运行 遇到了一个类似的问题，试图实例化 Intersection Observer，并在 Kyle Matthew 的回复中找到了一个更简单的答案对此问题：

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

也就是说，您可以在组件的 componentDidMount 方法（或 useEffect 挂钩）中导入您的包或正在寻找 window 的任何内容。