Add import and export as ESM Modules

[ejgutierrez74]

Increasing Access

I have many problems just importing a class from other file in my sketch. The problem is that p5.js Web Editor doesnt work like all the JS frameworks or code. Also it doesnt show any messages to solve this, only doesnt work and leave the canvas in blank

Feature request details

Use import/export like ESM estandard modules. You can see an example of code that should work in p5.js Web Editor ( it works fine in Webstorm or VS Code), but doent work. You have to delete the export and import keywords to work properly. Would be nice that p5.js Web Editor would at least show a messge that import/export doesnt work or suggest to change the code.

https://editor.p5js.org/egutie9/sketches/O_xfapq72

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ejgutierrez74]

It doesnt work:

[takshittt]

Are you working on this issue or it needs discussion?

[ejgutierrez74]

?? Its a bug or missing feature.... im not a developer i cant work on it

[getify]

can someone please explain how that #3358 was ignored and allowed to rot? I'm dumbfounded.

[raclim]

@getify Thanks for touching base on this! We're a small project juggling quite a few things, so sometimes issues do slip through the cracks. We’d be happy to take another look and see how we can get it moving again if there’s still interest.

[getify]

thanks for the reply.

to be clear, I don't know if the linked PR was suitable / functional or not, or if it's bitrotted and no longer valid. but on quick glance, it looks plausible and reasonable. I was just dismayed that the triage of that PR back earlier this year didn't deal with the substance, but more just shrugged it off as not important enough for attention.

I understand p5 itself may not be ESM oriented, but I think users at the web editor probably don't care about such build implementation issues, and are just looking for the quickest way to try out various coding approaches.

for example, my son is in a CS class (high school) that's using the p5 editor. his most recent assignment was to move a class definition to its own file, and I assumed (wrongly) that it was surely possible to do so by putting it into a .js file and importing it. I knew I would need to show him how to adjust the loading of the sketch.js file in the HTML to use <script type=module>. I also presumed you'd probably need to export { draw, mouseClicked, ... } to make sure the p5 editor (and library) can access and automatically invoke them.

it was about 20 minutes of frustrating googling and watching various youtube videos which claimed to explain how, and various reddit/SO style forum discussions about it, before we finally concluded he had to do this with a plain JS file (and, for good measure, adding globalThis.MyClass = MyClass to the end of the file).

so I guess my position is, it would be nice at a minimum if:

• minimal statement of whether there's recognition by the maintainers of the issue being a valid feature request
• validating the previous PR (or not) to determine whether or not there's required further dev work for the feature or not