Error when using preload() with Vite + TypeScript: “Cannot read properties of undefined (reading 'pixels')”

p5.js Coding Questions
1

TL;DR:

I’m using p5.js with TypeScript + Vite.
When I try to use preload(), I get runtime errors like:

Uncaught FESError: Stopping sketch to prevent more errors
Uncaught TypeError: Cannot read properties of undefined (reading 'pixels')

Without defining preload, this error does not occur.

Is this error expected or a known compatibility issue when using preload() in a TypeScript + Vite environment?

You can reproduce the issue using my minimal template repository:
:backhand_index_pointing_right: GitHub - tomokikun/p5js-typescript-vite-template at f0329f9b22b82394397e66ae5d39424bbaefc9a8

:test_tube: Example Code

import p5 from 'p5';

const preload = (_p: p5) => {
};

const setup = (p: p5) => {
  p.createCanvas(800, 600);
  p.background(0);
  p.ellipse(p.width / 2, p.height / 2, 100, 100);
};

const draw = (_p: p5) => {};

new p5((p: p5) => {
  p.preload = () => preload(p);
  p.setup = () => setup(p);
  p.draw = () => draw(p);
});

:magnifying_glass_tilted_left: What I’ve Tried

  • Made sure the image path is correct (relative path, file exists).
  • Verified that loadImage() is only called inside preload().
  • Removed img.pixels access (I’m not calling it myself).
  • Tested with multiple browsers (Chrome and Safari) and clean builds.
  • Tried to find related issues or topics but I couldn’t.

:brain: Questions

  • Is this error expected or a known compatibility issue when using preload() in a TypeScript + Vite environment?

I’ve tried reading the code at p5.js/src/core/main.js at main · processing/p5.js · GitHub to understand what’s going on, but I’m still confused. Could someone please help explain it?
Any ideas or suggestions would be greatly appreciated. Thanks!

2

Hey! I think you might be using p5.js version 2.x.x. The new 2.x.x versions do not have a built-in preload() function anymore.

If you want to stay with 2.x.x versions, you could either use the preload compatibility add-on which brings back this function, or use the new way to load assets like images:

let img;

// Load the image and create a p5.Image object.
async function setup() {
  img = await loadImage('/assets/laDefense.jpg');
  createCanvas(100, 100);

  // Draw the image.
  image(img, 0, 0);

  describe('Image of the underside of a white umbrella and a gridded ceiling.');
}

(taken from the p5.js 2.0 documentation)

p5.js 2.0 compatibility add-ons: GitHub - processing/p5.js-compatibility: Add-on libraries that add p5.js 1.x features to p5.js 2.x for backwards compatibility

If you are using and staying with p5.js 2.x.x, also make sure to reference the correct 2.0 documentation at beta.p5js.org/reference/.

2 Likes
3

@humanbydefinition
Wow, thank you so much! That totally solved my problem. I had no idea that preload() was removed in p5.js 2.x.x — that was a complete blind spot for me. I thought loadImage is the latest documentation.

I really appreciate you pointing it out and providing the new approach with await loadImage() and the compatibility info. Super helpful! Thanks again!! :folded_hands:

4

Hi everyone!
Here I got a related problem. I’m doing my project with p5 as a module and developing with Typescript. The package doesn’t bring types so is needed to install @types/p5, but it seems types are outdated. In this peace of code:

p.setup = async () => {
    const guidePicture = await p.loadImage(illustration)
   ...
}

I’m getting the following error:

TS80007: await has no effect on the type of this expression.

So I’m not sure what should I do… while I was typing this, I imagine that the better thing I can do is put a ticket on the package repo, isn’t it?
// ----------- //
edit: well… in fact, I went to the repo and checked the issues, I noticed someone is already asking for an update, so I believe is about time until the package author will do it :v