p5 does not work with Typescript / module importing #8370
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- p5.strands
- WebGL
- DevOps, Build process, Unit testing
- Internationalization (i18n)
- Friendly Errors
- Other (specify if possible)
p5.js version
2.1.2
Web browser and version
Lots
Operating system
Ubuntu 24.04
Steps to reproduce this
Can someone help please, the P5 tutorial doesn't explain how to load p5 in a local project. Below is my index.ts file. Any way I try to access the p5 object, it's an empty object, not p5, which of course causes the error index.ts:28 Uncaught (in promise) TypeError: P5 is not a constructor. What is wrong please?
import * as p5 from 'p5';
let p: p5;
window.onload = setup;
function setup() {
const P5: any = (window as any).p5 || (p5 as any).default || p5;
console.log(P5);
p = new P5(() => { });
p.createCanvas(800,800);
p.draw = draw;
}
function draw() {
p.background(256);
}index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./index.ts" type="module" ></script>
</head>
<body>
</body>
</html>Run with docker run --init -it --rm -v ".:/app" -w "/app" -p 3000:3000 node:24.12.0-slim sh -c "rm -rf dist; rm -rf .parcel-cache; npx parcel index.html --host 0.0.0.0 --port 3000";
I've also tried following the code in
- https://bulkan-evcimen.com/using_parceljs_typescript_p5js/
- https://blog.kakeragames.com/2022/02/20/p5-typescript.html
but neither work anymore. Maybe a recent update broke p5?