# React and P5 problem with loadSound and loadImage

**URL:** <https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440>\
**Category:** Libraries\
**Created:** [December 22, 2020, 12:55pm UTC](https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440 "2020-12-22T12:55:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![teemee](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@teemee](https://discourse.processing.org/u/teemee)\
**Post date:** [December 22, 2020, 12:55pm UTC](https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440/1 "2020-12-22T12:55:57Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2ad5debc0fb470c1172909385f12d5639e04e33b.png)

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.

```auto
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).

```auto
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](https://drive.google.com/file/d/12xacfIZwyjaTCDLWbA6M6YE1GBb-6dMl/view?usp=sharing)

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

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.

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [December 22, 2020, 3:34pm UTC](https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440/2 "2020-12-22T15:34:23Z")

</div>

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

> **[The Building of thread’d: React, three.js, & p5.js](https://medium.com/front-end-weekly/the-building-of-threadd-react-three-js-p5-js-fc988e687686)**
>
> For my most recent and most ambitious project yet, I wanted to make an interactive way to create patterns, save them, and then render those…