# SimplexNoise is not defined

**URL:** <https://discourse.processing.org/t/simplexnoise-is-not-defined/33163>\
**Category:** Libraries\
**Created:** [October 29, 2021, 4:22pm UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163 "2021-10-29T16:22:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![momo](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@momo](https://discourse.processing.org/u/momo)\
**Post date:** [October 29, 2021, 4:22pm UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/1 "2021-10-29T16:22:12Z")

</div>

Hello, I’m a beginner of P5.JS. And I found openprocessing is really great place to start. I was learning this interesting sketch made by Takawo [210612a - OpenProcessing](https://openprocessing.org/sketch/1216841)(a really nice sketch), when I want to run it locally, the console keeps telling me SimplexNoise is not defined. From my basic coding knowledge, I think I have already defined it, please help me figure out the issue. Thanks!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 29, 2021, 11:48pm UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/2 "2021-10-29T23:48:22Z")

</div>

> [@momo](#):
>
> , the console keeps telling me SimplexNoise is not defined.

If you go to his [210612a - OpenProcessing](http://OpenProcessing.org/sketch/1216841) sketch and click on the far right icon w/ 3 lines to open a panel you’ll see in the “Libraries” section at that panel’s bottom that he’s using an extra library file called “simplex-noise.min.js”: [simplex-noise](https://29a.ch/simplex-noise/docs/index.html)

> [@momo](#):
>
> , when I want to run it locally,

In order to run a p5.js sketch outside a specialized p5.js hosting service you’re gonna need some HTML file w/ `<script>` tags to load all required libraries plus you’re own JS files.

The “index.html” file below is the most simplistic template to achieve that:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

However, the fact that you need this extra “simplex-noise.js” library below:  
[cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js](http://cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js)

You’ll also have to add an extra `<script>` tag for it inside the HTML; making sure it loads before your own JS files:

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

<script defer
  src=https://cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.min.js>
</script>

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

```

Also make sure to run it using a local server. Good luck!

---

<div class="post-metadata">

**Author:** ![momo](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@momo](https://discourse.processing.org/u/momo)\
**Post date:** [October 30, 2021, 2:49am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/4 "2021-10-30T02:49:06Z")

</div>

Hi! Thanks for explaining step by step, I appreciate for that. I still have the error in my console after following the instruction, I must did something wrong. I wonder if you can have a look at this sketch [p5.js Web Editor](https://editor.p5js.org/momoiamcgi-Li/sketches/ygQc_O0sF)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 30, 2021, 8:51am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/5 "2021-10-30T08:51:35Z")

</div>

> [@momo](#):
>
> , I must did something wrong.

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](http://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](http://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:

```auto
<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:

> **[import - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)**
>
> The static import declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned...

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

---

<div class="post-metadata">

**Author:** ![momo](https://avatars.discourse-cdn.com/v4/letter/m/f4b2a3/32.png) [@momo](https://discourse.processing.org/u/momo)\
**Post date:** [October 30, 2021, 9:18am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/7 "2021-10-30T09:18:26Z")

</div>

Yes!!! It works. Thanks for your patience! I’m so happy I always get kindly help and new knowledge from here.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 30, 2021, 10:39am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/8 "2021-10-30T10:39:54Z")

</div>

For any1 interested in @momo’s online sketch, here it is:

https://editor.p5js.org/momoiamcgi-Li/sketches/g1FhMb4t5