Using ES6 Modules in the p5.js Web Editor

I’m trying to use modules on the web editor, but I can’t seem to get it to work because it cannot resolve the relative paths. Is it even possible? Any help would be greatly appreciated, for my specific use case I want to introduce some kids to programming using the p5 editor but also create some utility libraries for use in exercises.

I don’t use that web editor so I dunno if it’s possible there.
However I had success loading modules on Glitch.com:

Also when I posted on GitHub’s gist:

Gist.GitHub.com/GoSubRoutine/da4939559d8b786df13f5694ea2edd30

I was able to visualize the modularized sketch on Bl.ocks.org:

Thanks, I didn’t know about Glitch, that might be worth looking into, it certainly looks neat.

That said, I would still like to see if I can get it working in the p5 editor before I start doing the song and dance of testing a dozen different online editors, each with their own limitations you only find out about after a week of use.

Another thread which may or may not be helpful:
https://discourse.processing.org/t/how-to-access-p5js-functions-when-using-es6-modules/21359

2 Likes

Found some pointers on Github issues:

This seems to answer the issue I have, haven’t tried it yet. It confirms my suspicion that import statements are not resolved to work with the file listing as presented in the editor.