SimplexNoise is not defined

p5.js Libraries
5

No worries, you didn’t. After a closer look I’ve spotted the library fails at the very start:
Object.defineProperty(exports, "__esModule", { value: true });

There’s no existing exports in the browser’s JS environment.

But rather exports exists for code running in the Node.js server-side environment.

That is, the library Simplex-Noise is primarily meant for server-side apps, not client-side browsers.

However not all is lost: Besides the CommonJS (cjs) version:
cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js

There’s also an EcmaScript Module (esm) version:
cdn.JsDelivr.net/npm/simplex-noise/dist/esm/simplex-noise.js

But b/c a module JS file has a different behavior compared to a vanilla JS file, we’ll need some extra code in order to actually import it:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script type=module>
  // Imports class SimplexNoise from module file "simplex-noise.min.js":
  import SimplexNoise from
    "https://cdn.JsDelivr.net/npm/simplex-noise/dist/esm/simplex-noise.min.js";

  // Makes imported class SimplexNoise globally available:
  globalThis.SimplexNoise = SimplexNoise;
</script>

<script defer src=sketch.js></script>

As you can see above, a module JS file needs the keyword import in order to grab it:

I believe the template above should work this time. Good luck!

1 Like