Pieter
August 6, 2022, 8:13pm
1
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.Glitch.com :
Also when I posted on GitHub’s gist:
.block
height: 600
scrolling: no
border: yes
license: cc-by-4.0calc.mjs
const ERRORS = [
"Polygon's newSize parameter can't be less than 2!",
"Parameter dots[] must contain at least 2 { x, y } objects!",
"Parameter epsilon can't be a negative value!"
];
export default function reducePolygon(dots, newSize, debug=true) {
if (newSize < 2) throw RangeError(ERRORS[0]);
let reduced, ep = 0;show original
data.mjs
export default function mapXYTableToXYArray(t, asVectors=false) {
return t.getArray().map(asVectors && xyArrToVecMap || xyArrToXYObjMap);
}
function xyArrToVecMap([ x, y ]) {
return p5.instance && createVector(+x, +y) || new p5.Vector(+x, +y);
}
function xyArrToXYObjMap([ x, y ]) {
return { x: +x, y: +y };show original
There are more than three files. show original
I was able to visualize the modularized sketch on Bl.ocks.org :
.block
height: 600
scrolling: no
border: yes
license: cc-by-4.0calc.mjs
const ERRORS = [
"Polygon's newSize parameter can't be less than 2!",
"Parameter dots[] must contain at least 2 { x, y } objects!",
"Parameter epsilon can't be a negative value!"
];
export default function reducePolygon(dots, newSize, debug=true) {
if (newSize < 2) throw RangeError(ERRORS[0]);
let reduced, ep = 0;show original
data.mjs
export default function mapXYTableToXYArray(t, asVectors=false) {
return t.getArray().map(asVectors && xyArrToVecMap || xyArrToXYObjMap);
}
function xyArrToVecMap([ x, y ]) {
return p5.instance && createVector(+x, +y) || new p5.Vector(+x, +y);
}
function xyArrToXYObjMap([ x, y ]) {
return { x: +x, y: +y };show original
There are more than three files. show original
Pieter
August 7, 2022, 10:32am
3
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.
svan
August 7, 2022, 3:58pm
4
2 Likes
Pieter
August 7, 2022, 4:32pm
5
Found some pointers on Github issues:
opened 04:11PM - 02 Oct 21 UTC
#### Nature of issue?
- Existing feature enhancement
_**NOTE:** I am not s… ure if this is technically an enhancement request or not. If it is not possible to `import` other files into a sketch in the Web Editor, then this is an enhancement request. (Otherwise, I suppose it’s a…support request (?).)_
#### Feature enhancement details:
I’m learning p5.js, and loving it so far. The web editor definitely makes it easier to jump in and play!
After modifying an existing example, the code got long enough for me to want to split it up into multiple files. However, I don’t want to pollute the global namespace (I actually started out by modifying the example to use P5 in instance mode), so I want to split the code up using JS modules.
But I keep getting the following error in the Web Editor:
```
Module name, './config.js' does not resolve to a valid URL.
```
But that file is in the same folder, so I don’t know why this is happening.
(I even tried renaming the file to use the `.mjs` extension, but no luck.)
So…
**How can I `import` other files into a sketch on the Web Editor?**
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.