Question

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

WebpackError：窗口未定义

tremor_0['X']

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

     - 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

Answer 1

还没有完全研究另一个建议的答案：React.Lazy和Suspense，但是遇到了一个类似的问题，试图实例化“路口观察者”，并在凯尔·马修（Kyle Matthew）对这个问题的回答中找到了一个更简单的答案：

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

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

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上查看lazy & Suspense doc。

WebpackError：窗口未定义

2 个答案: