Import JS modules in web editor?

[Zearin]

Nature of issue?

• Existing feature enhancement

NOTE: I am not sure 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?

[welcome]

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.

[I-Omnibus]

Here's a workaround, although it seems that the solution is as simple as editor.p5.org getting the mime type right for JavaScript files:

/*
Would prefer:

  import * as lib from "./Dependencies.js";
  
or even:

  import * as lib from "https://editor.p5js.org/Omnibus/sketches/8tseBlNuH/Dependencies.js";

but editor.p5.org serves absolute JavaScript urls with incompatible 'module' mime types 
and relative urls are rejected, as the service is not hierarchical 
*/
import * as lib from "https://i-omnibus.github.io/Dependencies.js";

function preload() {
  lib.Dependencies.resolve(["load_me_dynamically"], /*bypassCache*/ true);
}

function setup() {
  noLoop();
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed() {
  print({ mouseX, mouseY });
}

/*
Note that in index.html the script type is 'module' to allow the 'import' keyword:

<script src='sketch.js' type='module'></script>

Which means that the critical functions must be manually imported into the 'dom', as follows:
*/
((
  functions = {
    /* select required functions */
    preload,
    setup,
    draw,
    //mouseMoved,
    //mouseDragged,
    mousePressed,
    //mouseReleased,
    //mouseClicked,
    //doubleClicked,
    //mouseWheel,
  }
) => Object.assign(window, functions)).call();

[GregStanton]

Hi all! I was looking into using modules with the web editor because I'm investigating different options for designing a p5.js add-on library. I made this minimal reproducible example to test out the behavior, and the resulting error message is similar to the one being discussed. I thought I would post the example here in case it's helpful.

[backspaces]

So the question I have is: does the p5 web editor support import statements like:

import TwoDraw from 'https://code.agentscript.org/src/TwoDraw.js'

or do i have to use a dynamic import like this:

async function preload() {
  const module = await import('https://code.agentscript.org/src/TwoDraw.js');
  window.TwoDraw = module.default; // Expose the module to the global scope
}