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

**URL:** <https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431>\
**Category:** Coding Questions\
**Created:** [May 23, 2025, 7:55am UTC](https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431 "2025-05-23T07:55:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomokikun](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@tomokikun](https://discourse.processing.org/u/tomokikun)\
**Post date:** [May 23, 2025, 7:55am UTC](https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431/1 "2025-05-23T07:55:40Z")

</div>

## **TL;DR:**

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

```auto
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:  
👉 [GitHub - tomokikun/p5js-typescript-vite-template at f0329f9b22b82394397e66ae5d39424bbaefc9a8](https://github.com/tomokikun/p5js-typescript-vite-template/tree/f0329f9b22b82394397e66ae5d39424bbaefc9a8)

* * *

## 🧪 Example Code

```js
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);
});

```

## 🔍 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.

* * *

## 🧠 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](https://github.com/processing/p5.js/blob/main/src/core/main.js) 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!

---

<div class="post-metadata">

**Author:** ![humanbydefinition](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humanbydefinition/32/20701_2.png) [@humanbydefinition](https://discourse.processing.org/u/humanbydefinition)\
**Post date:** [May 23, 2025, 1:28pm UTC](https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431/2 "2025-05-23T13:28:44Z")

</div>

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:

```auto
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](https://github.com/processing/p5.js-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/](https://beta.p5js.org/reference/).

---

<div class="post-metadata">

**Author:** ![tomokikun](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@tomokikun](https://discourse.processing.org/u/tomokikun)\
**Post date:** [May 23, 2025, 1:58pm UTC](https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431/3 "2025-05-23T13:58:00Z")

</div>

@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](https://p5js.org/reference/p5/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!! 🙏

---

<div class="post-metadata">

**Author:** ![Gosunkugi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gosunkugi/32/20860_2.png) [@Gosunkugi](https://discourse.processing.org/u/Gosunkugi)\
**Post date:** [June 30, 2025, 9:08am UTC](https://discourse.processing.org/t/error-when-using-preload-with-vite-typescript-cannot-read-properties-of-undefined-reading-pixels/46431/4 "2025-06-30T09:08:19Z")

</div>

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:

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