# Cannot build P5 sketch in React. WebpackError: ReferenceError: window is not defined

**URL:** <https://discourse.processing.org/t/cannot-build-p5-sketch-in-react-webpackerror-referenceerror-window-is-not-defined/18182>\
**Category:** Libraries\
**Created:** [February 27, 2020, 1:56pm UTC](https://discourse.processing.org/t/cannot-build-p5-sketch-in-react-webpackerror-referenceerror-window-is-not-defined/18182 "2020-02-27T13:56:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimR](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@TimR](https://discourse.processing.org/u/TimR)\
**Post date:** [February 27, 2020, 1:56pm UTC](https://discourse.processing.org/t/cannot-build-p5-sketch-in-react-webpackerror-referenceerror-window-is-not-defined/18182/1 "2020-02-27T13:56:37Z")

</div>

I’ve got a `p5.js` sketch that is included in my React project. When I build my project it throws:

- `error "window" is not available during server side rendering.`
- on: `window.requestAnimationFrame = (function() {`
- `WebpackError: ReferenceError: window is not defined`

Ok, I understand why. During the build the window DOM is not available. So I tried to work around it with two ways, as seen in my code example.

- First is to use react [loadable componant](https://github.com/gregberge/loadable-components)
- Second to check if `window` is undefined (on build) and if so return something else than the main code.

my code example:

```auto
  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}/>
    }
  }

```

#the question:#  
How do I get my sketch to only run on client side.