Webpack错误：未定义窗口。

Question

我这里也遇到了同样的问题，Coverflow在gatsby develop模式下可以正常工作，但在build时会出现错误： WebpackError: window is not defined

     - 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;

- Paul

Answer 1

我还没有完全了解关于React.Lazy和Suspense的其他建议答案，但是在尝试实例化Intersection Observer并在Kyle Matthew对此问题的回复中找到了一个更简单的答案：

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

也就是说，你可以在组件的componentDidMount方法（或useEffect钩子）中导入你要查找window的包或任何东西。

- jhwls

Answer 2

包 '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上有关“惰性加载和Suspense”文档的链接。

- Derek Nguyen