将 p5.js 合并到 Next.js（React App）网站中

Question

我有一个在本地主机上完美运行的反应应用程序。但是当我将其添加到我的 Next.js (React.js) 网站时，它显示“ReferenceError：窗口未定义”。我认为这是因为我在 Node.js 上运行 P5.js 但它只能在浏览器上运行。我怎样才能解决这个问题？

我在 React 应用程序中的 P5.js 草图

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;

Answer 1

导入 p5 里面componentDidMount

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

在 NextJS 中，componentDidMount() 仅在窗口和其他浏览器特定 API 可用的客户端执行。看看这个答案