[p5.js 2.0 Bug Report]: p5 reference error for p5.MediaElement #7968
Description
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:
- Install p5.js from npm
- Create the sketch.js file show in the snippet section
- 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/[email protected]/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