React and P5 problem with loadSound and loadImage

p5.js Libraries
1

I’m new to React and Node.js and I have a problem using it with P5.js. I have successfully made this project with p5.js and tone.js but the project involved some sensitive data that I want to hide from the public, such as a Twitter API key and token, so my programmer friend has helped me build a site with a backend.

We have successfully called p5js to work but not with loadSound and loadImage. My understanding is that we try to load these data at the wrong place. I hope that this is not a bug in p5js.

Here’s the error shown when use loadSound()

Screen Shot 2563-12-14 at 21.19.53
Screen Shot 2563-12-14 at 21.19.532880×1800 913 KB

As I mentioned, I do not really know how to program with React and node.js but below are parts that the program calls the whole P5js inside one file.

import React from "react";
import p5 from "p5";
import { preload, setup, draw } from "./lib/sketch2D";
import "./App.css";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myP5 = new p5(this.Sketch, this.myRef.current);
  }

  Sketch = (p) => {
    p.preload = () => {
      preload(p);
    };
    p.setup = () => {
      setup(p);
    };
    p.draw = () => {
      draw(p);
    };
  };
  render() {
    return <div ref={this.myRef}></div>;
  }
}
export default App;

And here’s where it calls loadSound(); (or loadImage()) and is in preLoad() function.
I call the function from another file (./lib/sketch2D).

const preload = async (p) => {
//calling loadSound()here//
soundB = p.loadSound("../data/audio/A/soundB.mp3", (sound) => {
soundB = sound;
});
//calling loadImage()here//
btn01 = p.loadImage("../data/img/btn01.png", (img) => {
btn01 = img;
console.log(img); console.log(btn01);
});
//--//
  if (getLiveTweets) {
    await loadTwitter();
    setInterval(loadTwitter(), 180000);
  }
};

If this works, the program should play the sound when the mouse has released a button. Meaning, the sound has not been played yet at the beginning when the site is loading. I guess it should not be the issue why there is an error.

//////---------------////

For loadImage(), the console shows the error states that it happens on

…/node_modules/react-error/overlay/lib/index.js:1

so something is wrong with index.js:1

See image: image or error

//////---------------////

Let me know if there’s any info or code I should put up here for the question. I’m new here.

Any thoughts and suggestion about this is appreciated. Thanks in advance.

2

Did you also load p5.sound module?
I found this some time ago, might be useful (includes a link to p5/p5.sound/react):