Problem using p5 'esm' via jsdeliver (cdn)

A JS script using type “module” doesn’t behave the same way as a regular 1.

1 of its many “gotchas” is related to declaring variables using keywords var & function.

For example, your 2 functions function setup() {} & function draw() {} will have different global visibility depending on whether they’re being run using type “module” or not!

For regular JS script type, the variable declaring keyword function (and var as well) will also append the variables setup & draw on the globalThis:

However, for type “module”, that won’t happen!

B/c neither setup() nor draw() callbacks are present on globalThis, p5js won’t “see” them; and thus your sketch won’t run!

As a workaround, you can manually add those 2 function variables as globalThis properties:

globalThis.setup = setup;
globalThis.draw = draw;
2 Likes