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: