[p5.js 2.0 Bug Report]: p5 reference error for p5.MediaElement

[lukejans]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

v2.0.3

Web browser and version

Firefox 140.0.4

Operating system

MacOS (Sequioa 15.5)

Steps to reproduce this

Steps:

1. Install p5.js from npm
2. Create the sketch.js file show in the snippet section
3. Run Vite in dev mode to view the page.

Snippet:

import P5 from "p5";

/**
 * @type {P5.MediaElement}
 */
let videoFeed;

window.setup = async function setup() {
    noCanvas();
    videoFeed = createCapture(VIDEO);
    videoFeed.size(90, 90);
};

window.draw = function draw() {
    videoFeed.loadPixels();
};

Errors

fes_core.js:166:9
🌸 p5.js says: 
[p5.js?v=8fb9faf4, line 47924] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined.

 + More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong

fes_core.js:566:22
Uncaught TypeError: can't access property "functionName", stacktrace2[(friendlyStack[0].frameIndex - 2)] is undefined
    processStack fes_core.js:566
    fesErrorMonitor fes_core.js:662
    fesCore fes_core.js:946
    registerAddon main-BKN5yFoS.js:1258
    friendlyErrors index.js:16
    <anonymous> app.js:108
[Learn More]
    processStack fes_core.js:566
    fesErrorMonitor fes_core.js:662
    (Async: EventListener.handleEvent)
    fesCore fes_core.js:946
    registerAddon main-BKN5yFoS.js:1258
    friendlyErrors index.js:16
    <anonymous> app.js:108

p5.MediaElement.js:796:5
Uncaught (in promise) ReferenceError: p5 is not defined
    loadPixels p5.MediaElement.js:796
    setup sketch.js:11
    #_setup main-BKN5yFoS.js:1303
    #_start main-BKN5yFoS.js:1277
    _p5 main-BKN5yFoS.js:1241
    _globalInit init.js:82
    promise callback* app.js:118
[Learn More]
    #_start main-BKN5yFoS.js:1277
    AsyncFunctionThrow self-hosted:804
    (Async: async)
    _p5 main-BKN5yFoS.js:1241
    _globalInit init.js:82
    (Async: promise callback)
    <anonymous> app.js:118

Additional Notes

loadPixels() is working on variables with the p5.Image type but does not work for the p5.MediaElement. Something to note is that the language server correctly picks up on most p5 types. For instance when an image is loaded with loadImage() and stored into a variable, it implicitly has a type of p5.Image. However createCapture() is given an implicit type of any, so the videoFeed variable above is also of type any. Additionally when I hover over the import line: import P5 from "p5"; I get the following message:

Could not find a declaration file for module 'p5'. '/Users/lukejans/Code/testing/p5-issue/node_modules/.pnpm/p5@2.0.3/node_modules/p5/dist/app.js' implicitly has an 'any' type.
There are types at '/Users/lukejans/Code/testing/p5-issue/node_modules/p5/types/p5.d.ts', but this result could not be resolved when respecting package.json "exports". The 'p5' library may need to update its package.json or typings. (ts 7016)

So when I explicitly set the type in a JSDoc comment I get a language server hint that P5.MediaElement cannot be resolved.

Potentially Related Code

p5.js/src/dom/p5.MediaElement.js

Lines 787 to 790 in 746a481

	loadPixels(...args) {
	this._ensureCanvas();
	return p5.Renderer2D.prototype.loadPixels.apply(this, args);
	}

[davepagurek]

looks like p5 is not imported in this file where it's used https://github.com/processing/p5.js/blob/dev-2.0/src%2Fdom%2Fp5.MediaElement.js#L789

[pratham-radadiya]

hii, i am interested in this issue. can you please assign me?

[davepagurek]

Thanks @pratham-radadiya!

[adityaapraveen]

@davepagurek if its still not solved, I would be happy to solve it dave!

[akshatajmera7]

@davepagurek If its still not solved could you please assign this issue to me, would be happy to solve

[ksen0]

Hi @pratham-radadiya , are you currently working on this one? Please let us know in the next week or so; no worries if you're not working on it anymore. In that case, we can reassign to the next volunteer. Thanks so much!