window is not defined & p5.loadSound is not a function

[saifullahakhtar]

Hello, I'm having the two errors below in NextJS version 14, could anyone please check and let me know if I'm doing any mistake?

1) Error: window is not defined 2) TypeError: p5.loadSound is not a function

P5 Sketch Component

"use client"

import React from "react";
import * as p5 from "p5";
import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

(window as any).p5 = p5;
import("p5/lib/addons/p5.sound");

const sketch: Sketch = p5 => {
  let song: p5.SoundFile;
  let button: p5.Element;

  p5.setup = () => {
    p5.createCanvas(600, 400, p5.WEBGL);
    p5.background(255, 0, 0);
    button = p5.createButton("Toggle audio");

    button.mousePressed(() => {
      if (!song) {
        const songPath = "/piano.mp3";
        song = p5.loadSound(
          songPath,
          () => {
            song.play();
          },
          () => {
            console.error(
              `Could not load the requested sound file ${songPath}`
            );
          }
        );
        return;
      }

      if (!song.isPlaying()) {
        song.play();
        return;
      }

      song.pause();
    });
  };

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export default function SketchP5() {
  return <NextReactP5Wrapper sketch={sketch} />;
}

Main file, where I'm loading component:

import React from "react";

const SketchP5 = React.lazy(() => import("@/components/sections/SketchP5"));

export default function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <React.Suspense fallback={<div>Loading...</div>}>
                <SketchP5 />
            </React.Suspense>
        </main>
    );
}

[yevdyko]

Hey @saifullahakhtar, thanks for sharing the issue. As far as I can see, it isn't related to the package itself. The error with window is related to Next.js, so you should refer to the documentation of this framework. The error with the sound loading is about the way the library was imported into the component.

If you need more specific advice, e.g. chat gpt can provide a couple of good tips on where to look, or read the documentation of Next.js and p5 in more detail

[yevdyko]

I think we can add a proper example of using p5 addons along with Next.js and the p5 wrapper in the README on our end. WDYT @jamesrweb?

[saifullahakhtar]

Hello @yevdyko, thank you for your response and suggestion, It'd be really helpful if you guys can add a proper example of using p5 addons and p5 wrapper along with Next.js.

[saifullahakhtar]

Hi @yevdyko, I've resolved the 1st issue of "window is not defined" but I'm still having this error below:

TypeError: p5.loadSound is not a function.

Could you please give me any advice?

[saifullahakhtar]

@yevdyko, any help regarding this error please?

TypeError: p5.loadSound is not a function.

[jamesrweb]

@saifullahakhtar im happy to help here but I need to know:

• what have you tried so far?
• have you got a repl which showcases the issue? We need one to verify and test.

[saifullahakhtar]

Hello @jamesrweb, Thank you for your response, here's the code with the issue, you can test and verify.

https://stackblitz.com/edit/stackblitz-starters-ksxqpa

[saifullahakhtar]

Hello @jamesrweb, I'm reaching out regarding the code issue I mentioned earlier. Could you please take a moment to review the code snippet below and provide your insight? Your expertise would be incredibly helpful in resolving this matter.

[jamesrweb]

Yes @saifullahakhtar i will get to it asap, it's on my list of things to do

[jamesrweb]

@saifullahakhtar I took a look and you didn't implement p5 sound exactly as guided and forgot to await the import of the sound library as one example of this.

Furthermore, NextJS is tricky with top level await statements though and so you need to look upstream at both NextJS and P5 to figure that one out, this library is working as it should and the issue lays with one of those projects, most probably NextJS itself. This being the case I will now close the issue.