"window" global issues using the p5.js library in a Deno / Fresh project
Hi I'm trying to use the p5.js library to make a little game on my site that uses Deno and Fresh. I tried directly using the p5.min.js download, the p5.js NPM package, and this p5 wrapper that says it's compatible with Deno / TS: https://jsr.io/@kaleidosium/p5-wrapper-ts. All of these result in the same "window is not defined error" coming from p5.js because p5 is trying to use the window global and i'm wondering if there is any way to fix this.
I was thinking to try replacing the window calls in the p5 file but it's transpiled into an illegible form of js. It's also strange that the p5-wrapper package says it works with Deno so I'm just wondering if there's something i'm missing here, or another way to use p5 with Deno. Might just try importing with a CDN next or just using Three.js for now. Thanks!
2 Replies
You could define the window global manually as a workaround:
just throw this somewhere, and it should work
globalThis.window = globalThisHmm thank you, that seems to have worked, but I ended up getting the document warning too and decided to just do the whole import exclusively in the browser like this:
useEffect(() => {
import("p5").then((p5) => {
console.log("p5", p5);
const sketch = (p: p5) => {
p.setup = () => {
p.createCanvas(400, 400);
};
p.draw = () => {
p.background(220);
p.textSize(32);
p.text("Hello World", 100, 100);
};
};
new p5.default(sketch);
});
}, []);