# Webpacking the p5 addons

**URL:** <https://discourse.processing.org/t/webpacking-the-p5-addons/18264>\
**Category:** p5.js\
**Created:** [March 1, 2020, 4:11am UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264 "2020-03-01T04:11:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![modestfool](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@modestfool](https://discourse.processing.org/u/modestfool)\
**Post date:** [March 1, 2020, 4:11am UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/1 "2020-03-01T04:11:20Z")

</div>

Hi. I’m able to get p5 to render drawings, but I can’t get it to import sound addons. The inpector throughs the error: p5 is not defined (inside p5.sound.js:3112).

My code is as follows:

```auto
import p5 from './p5/p5'
import './p5/addons/p5.sound';

const containerElement = document.getElementById('p5-container');

const sketch = (p) => {
    let x = 100;
    let y = 100;
    let mic;

    p.setup = function () {
        p.createCanvas(800, 400);
        mic = new p.AudioIn();
        mic.start();
    };

    p.draw = function () {
        p.background(0);
        p.fill(255);
        p.rect(x, y, 50, 50);
    };
};

new p5(sketch, containerElement);

```

I believe my import paths are correct. Thanks for the help.

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [March 2, 2020, 12:42am UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/2 "2020-03-02T00:42:43Z")

</div>

Hi! Welcome to Processing. So just to be clear, your import paths are working, but you have a problem with your sound addons?

---

<div class="post-metadata">

**Author:** ![modestfool](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@modestfool](https://discourse.processing.org/u/modestfool)\
**Post date:** [March 2, 2020, 11:20pm UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/3 "2020-03-02T23:20:26Z")

</div>

Thanks for the reply. Well my p5 import seems to be working because I can draw to the canvas but when I try to use the sound addon I get the error mentioned above. So my addon import probably didn’t work, but the path is pointing to the p5.sound file. Does it matter how the files are structured? I downloaded them from p5 and dropped them in my src file. I thought it could also be related to my webpack bundler or maybe how I’m invoking it on the p argument and not p5, but I’m pretty clueless.

---

<div class="post-metadata">

**Author:** ![modestfool](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@modestfool](https://discourse.processing.org/u/modestfool)\
**Post date:** [March 3, 2020, 6:10pm UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/4 "2020-03-03T18:10:41Z")

</div>

For those wondering, I got it to work by just importing through the index.html instead of index.js.

---

<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:** [March 3, 2020, 7:04pm UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/5 "2020-03-03T19:04:41Z")

</div>

- p5js and many other JS libraries aren’t ES6 modules yet.
- So the safest way to import them is via a `<script>` tag inside an “.html” file:

> **[Ramer–Douglas–Peucker Algorithm](https://bl.ocks.org/GoSubRoutine/da4939559d8b786df13f5694ea2edd30)**
>
> GoSubRoutine’s Block da4939559d8b786df13f5694ea2edd30

- For our own files and ES6 module compatible libraries we can finally use the keywords `import` & `export`:

> <https://gist.github.com/GoSubRoutine/da4939559d8b786df13f5694ea2edd30>
>
> There are more than three files. show original

---

<div class="post-metadata">

**Author:** ![searaig](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/searaig/32/11752_2.png) [@searaig](https://discourse.processing.org/u/searaig)\
**Post date:** [January 12, 2021, 4:45pm UTC](https://discourse.processing.org/t/webpacking-the-p5-addons/18264/6 "2021-01-12T16:45:08Z")

</div>

@modestfool Not sure if this helps now as it’s very late, but, I was having a similar issue building `p5` scripts that rely on p5.sound using Parcel. Due to the fact that p5 is an implicit global in `p5.sound` the only way I was able to build with Parcel was as follows,

```auto
window.p5 = require('p5') 
require('p5/lib/addons/p5.sound')  

new p5(sketch => {
    sketch.setup = () = > {
        console.log('hi there!')
    }
});

```

If you only need `p5` core then the following works,

```auto
import p5 from 'p5' 

new p5(sketch => {
    sketch.setup = () = > {
        console.log('hi there!')
    }
});

```

Hope this helps you or others!