P5.js Web Editor problem exporting a function

p5.js Beginners
1

Hi im doing this test to import a class from a separate file:

but i got error:

The export:

imagen
imagen1694Ɨ1165 83.6 KB

The import:

imagen
imagen1694Ɨ1165 80.5 KB

The html file:

imagen
imagen1694Ɨ1165 121 KB

Any help would be apreciated

This is for educational purpose

1 Like
2

Do you have to use ā€˜moduleā€™? I added this line to index.html
<script src="Pacman.js"></script>
and did not place the file in a folder. I also removed the word ā€˜exportā€™ before class Pacman{ā€¦}

we
we302Ɨ226 4.3 KB

I used this code without import

let myPacman = new Pacman(100,100);
console.log(Pacman);
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  myPacman.showPacman();
}

It worked and I got this output:

pman
pman792Ɨ804 3.28 KB

3

Also got it, but i need inside folder classes, as id have more classes and i want the project some kind of order.
In JS all files that has any import/export should be modules.

Also import and export should be as all JS works this way.

I think import/export doesnt work in p5.jsā€¦dont know if its a bug, or is not implemented yet, or you have to import/export like you did @svanā€¦

Thanks, hope anybody specially dev could give a light in the darkness. :wink:

4

Those 2 keywords are JS features, and p5.js, which is a frontend library, canā€™t change that:

As I have already mentioned to you on your previous forum thread:

B/c they donā€™t even acknowledge ECMA Script Modules (ESM / ā€œ.mjsā€) exist anywhere on their docs, itā€™s no wonder their ā€œp5.js Web Editorā€ doesnā€™t seem to be compatible w/ ESM either!

Pretty much any other JS code hosting/editor solution available should work!

For example, you can try out:

And many others to host JS code + p5.js library!

1 Like
5

Thanks for sharing your thoughts! p5.js and the p5.js web editor are open-source projects built and maintained by the community. If thereā€™s a feature youā€™d like to see or something that could be improved, Iā€™d encourage you to open an issue on the p5.js repository or the p5.js web editor repository on GitHub, or even contribute a code change. Your feedback and contributions are what help these projects grow and evolve :blush: