react-p5 | Component lets you integrate p5 Sketches | Frontend Utils library

I've solved the problem. Thanks @JaredSmith for helping me.

I messed around with webpack but finally, I decided to move on with rollup which is much easier to use.

Found the Rollup tutorial by Portexe and it's very helpful.

So I changed the file structure to this

Given your setup, I can see two ways of telling the sketch to stop when route is switched and the Game react component is not rendered anymore.

Alt 1. You can make something similar to react-p5-wrapper documentation, reacting to props:

In CatchingGmae component:

Like juliomalves has suggested, I used dynamic import with next/dynamic

https://nextjs.org/docs/advanced-features/dynamic-import#with-named-exports

used like this for no SSR :

Most p5.js add-ons are, unfortunately, not well designed JavaScript libraries. Modern JavaScript libraries are published as modules that export specific functions/classes/variables that you can then import. There are ways to structure JavaScript modules such that they support different ways of including them (including the classic tag import, ES6 import statements, or the require() function), but many add-ons, such as p5.clickable do not do this. Additionally p5.clickable suffers from the unfortunate design decision of depending on p5.js library functions (rect/fill/stroke/etc.) being exposed globally. However, with some modest changes I was able to get it working in a React App:

In server-side-rendering, we haven't global variables from the browser, like the "window" variable. P5JsComponent must be rendered on the client-side.

Import P5JsComponent with no SSR:

A simple solution is to assign p5 to a component state in the setup function then you can use later on. The draft idea would look like:

According to the author of react-p5-wrapper here in this issue

the p5 that gets passed into the module isn't the same as the global p5 you traditionally get with a script tag. To access certain things with this package (due to the p5 node module itself) you need to use p5.constructor.[something]

Basically use p5.constructor.Vector.sub(this.position, ball.position) in your case.

How can I store that value globally?

For global states, use redux store. You can dispatch an action to store this label.

NOTE, as stated in the README,

myCustomRedrawAccordingToNewPropsHandler function is called if Properties of the wrapper component are changing

So I'm sharing the sketch object to be explicit. This redraw function will be used to access the parent function that actually dispatches to redux store.

Load your image from URL, not "from a variable", so: