Реагировать на сборку - Ошибка ссылки: окно не определено - Как работать только на стороне клиента

Question

У меня есть p5.js эскиз, который включен в мой gatsby.js проект. Когда я набираю sh и строю свой проект на netlify.com, это означает:

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

Хорошо, я понимаю, почему. Во время сборки окно DOM недоступно. Поэтому я попытался обойти это двумя способами, как видно из моего примера кода.

• Во-первых, использовать реагирующий загружаемый компонент
• Во-вторых, чтобы проверить, является ли window неопределенным (при сборке), и, если это так, вернуть что-то, кроме основного код.

мой пример кода:

  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

Я наконец понял это. Я переключился с реаги-р5-обертка на реаги-р5 . Это продолжало давать проблемы, даже с решением. Итак, я переключился. Также я переместил проверку, если окно существует в компоненте. Который намного чище

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