As a newcomer to SO, I haven't asked many questions before, so please bear with me if I don't entirely follow the guidelines. I'll do my best to explain the issue at hand.
In my project, I am utilizing Sveltekit (create-svelte) and P5JS (p5-svelte) to develop a canvas along with a user interface to manage parameters of the P5JS sketch. My goal is to create a class (Node) that extends a class from P5JS (Vector).
While I successfully import the Vector type from p5 without any issues, I'm unsure how to import Vector as a module. The crux of the problem arises when attempting to extend the Vector class, resulting in an error:
<script lang="ts"\>
import P5 from "p5-svelte";
import type { Sketch } from "p5-svelte";
import type { Vector } from "p5"; // Importing the Vector type from p5 - everything functions well since @types/p5 is installed
// import { Vector } from "p5"; // This method doesn't work: "Internal server error: Failed to resolve import "p5" from "src/routes/+page.svelte". Does the file exist?"
// import { Vector as p5Vector } from "p5"; // Same error message as above.
let width = 55;
let height = 55;
const sketch: Sketch = (p5) => {
p5.setup = () => {
p5.createCanvas(400, 400);
const myVector: Vector = p5.createVector(100, 100); // Successful creation of vector
console.log(myVector.x); // Outputs 100
};
p5.draw = () => {
p5.ellipse(p5.width / 2, p5.height / 2, width, height);
};
};
// Here lies the problem. Class Node fails to work, displaying "ReferenceError: Vector is not defined". Even importing Vector as a type triggers an error stating "'Vector' cannot be used as a value because it was imported using 'import type'.ts(1361)". Using p5.Vector also proves ineffective.
class Node extends Vector {
constructor(x, y) {
super(x, y);
this.x = x;
this.y = y;
}
}
\</script\> …
(for full file, see +page.svelte)
In addition, including p5 as a dev dependency alongside this setup results in an error even upon simply importing the library (Error 500 "window not defined").
I must be overlooking something obvious here.
The complete example can be found on GitHub and deployed here (leading to an Error 500, unfortunately).