React build - Reference error: Window is not Defined - How to only run on client side

Question

我的 gatsby.js 项目中包含一个 p5.js 草图。当我在 netlify.com 上推送和构建我的项目时，它显示：

• error "window" is not available during server side rendering.
• 于：window.requestAnimationFrame = (function() {
• WebpackError: ReferenceError: window is not defined

好的，我明白为什么了。在构建期间 window DOM 不可用。所以我尝试用两种方法解决它，如我的代码示例所示。

• 首先是使用react loadable componant
• 其次检查 window 是否未定义（构建时），如果是 return 除了主要代码之外的其他内容。

我的代码示例：

  import loadable from '@loadable/component'
  import sketch from "./p5_app";
  
  class GetP5Wrapper extends React.Component {
    render() {
  
      if (typeof window === 'undefined') 
         return <span>loading...</span>
  
      const P5Wrapper = loadable(() => import('react-p5-wrapper'))  //loadable help is not to run on build
  
      return <P5Wrapper sketch={sketch}/>
    }
  }

问题：

如何在客户端仅 运行 获取草图。

Answer 1

我终于明白了。我已经从 react-p5-wrapper to react-p5 切换了。即使有解决方案，它也会不断出现问题。所以我换了。此外，我已将检查 window 是否存在组件中。哪个更干净

  render() {
    if (typeof window !== 'undefined') {

      const Sketch = loadable(() => import('react-p5'));

      return <Sketch setup={this.setup} draw={this.draw}/>

    } else { // if window does not exist

      return null;
    }
  }