incorporating p5.js in a Next.js (React App) website

Question

I have a react app that runs perfectly on the local host. But when i add it to my Next.js (React.js) website, it says "ReferenceError: window is not defined." I think this is because i am running P5.js on Node.js but it can only run on the browser. How can i fix this?

My P5.js sketch in a React App

import React, { Component } from 'react';
// import logo from './logo.svg';
import p5 from 'p5';


class Sketch extends Component {
  constructor(){
  super()
  this.renderRef = React.createRef()
  this.state = {
    x: 100,
    y: 100
    }
  }

  componentDidMount(){
    this.sketch = new p5( p => {

      p.setup = ()  => {
          p.createCanvas(p.windowWidth, p.windowHeight)
          .parent(this.renderRef.current);
          p.background('white');
          p.strokeWeight(5);

      }
      p.windowResized = () => {
          p.resizeCanvas(p.windowWidth, p.windowHeight )
      }

      p.draw = () => {
          if(p.mouseIsPressed){
              p.stroke(225)
          } else{
              p.stroke(0, 0, 0);
          }
          p.line(p.mouseX , p.mouseY, p.mouseX , p.mouseY);
          p.line(p.mouseX, p.mouseY , p.mouseX, p.mouseY);
          }

        });


    }
render(){

return (
  <div className="App">
    <div ref={this.renderRef}></div>
  </div>
);
}
}

export default Sketch;

score 4 · Accepted Answer · answered Sep 11 '19 at 21:38

Import p5 inside of componentDidMount

componentDidMount(){
    const p5 = require("p5")
    this.sketch = new p5( p => {
    ...

In NextJS, componentDidMount() is executed only the client where window and other browser specific APIs will be available. Have a look to this answer

incorporating p5.js in a Next.js (React App) website

1 Answers1