# How to use export & import in p5.js

**URL:** <https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724>\
**Category:** Coding Questions\
**Created:** [August 14, 2021, 9:14am UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724 "2021-08-14T09:14:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JaPatProccesingDis](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@JaPatProccesingDis](https://discourse.processing.org/u/JaPatProccesingDis)\
**Post date:** [August 14, 2021, 9:14am UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/1 "2021-08-14T09:14:06Z")

</div>

Hello guys!  
I have some code stored in my GitHub repository…here is its jsdelivr link [https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js](https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js)

Now, I try importing this into the p5.js editor

```auto
import {pointCoord} from 'https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js';

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

function draw() {

  background(120);
  pointCoord
}

```

However, the console reads:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a134daeb89ef2238fec08f3e433695b6d69ca921.png)

I don’t really get what is wrnog and how to fix it. What should I do?

Thank you in advance:)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 14, 2021, 9:40am UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/2 "2021-08-14T09:40:14Z")

</div>

Hello, @JaPatProccesingDis, and welcome to the Processing Forum!

Several changes need to be made.

- Remove the `export` statement from your remotely hosted file.
- Remove the `import` statement from your local p5.js script.
- Add the following line to the `head` portion of the index.html file that is associated with your p5.js script:

```auto
  <script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js"></script>

```

- In your local p5.js script, change this …

```auto
pointCoord

```

… to this, so that the `pointCoord` function gets called …

```auto
pointCoord();

```

Your script should now look like this:

```auto
function setup() {
  createCanvas(400, 400);  
}

function draw() {
  background(120);
  pointCoord();
}

```

Please let us know how it works out. 😃

_EDITED on August 14, 2021 to clarify where the changes need to be made._

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 14, 2021, 2:39pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/3 "2021-08-14T14:39:33Z")

</div>

Hi! Welcome to the forum!

While @javagar 's post shows how to make it work, it’s not a solution to javascript import/export. I can explain a bit about modules, but in short, I don’t suggest to use p5.js with javascript modules because it’s too complicated.

The way how it works is you need to add `type="module"` when importing the script (and as javagar suggested, you need to call the function `pointCoord()` in draw).

```auto
    <script src="sketch.js" type="module"></script>

```

However, this code won’t work in your case because p5.js is not properly loaded when the script is loaded as a module. Also, your module `pointCoord` depends on p5.js, so that the module has to load p5.js as well 🤯

I think the only way to make this work is to write everything in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) and use tools like [browserify](https://browserify.org/) to add p5.js dependency to your `pointCoord` module. I know this is ridiculous, but since p5.js (global mode) itself is a “hack”, sadly it won’t work out of the box with features like JS modules.

---

<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:** [August 14, 2021, 10:40pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/4 "2021-08-14T22:40:18Z")

</div>

I’ve got these 2 old sketches using JS modules w/ p5.js: *️⃣

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

> <https://gist.github.com/GoSubRoutine/da4939559d8b786df13f5694ea2edd30#file-sketch-mjs>
>
> There are more than three files. show original

> **[Glitch: The friendly community where everyone builds the web](https://Glitch.com/~matter-js-bouncing-colorful-balls)**
>
> Simple, powerful, free tools to create and use millions of apps.

https://glitch.com/embed/#!/embed/matter-js-bouncing-colorful-balls?path=sketches/global.mjs&previewSize=0&sidebarCollapsed=true

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 15, 2021, 11:01am UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/5 "2021-08-15T11:01:55Z")

</div>

nice! I guess you are passing the p5 instance as an argument to the modules, right? I guess this is the most straightforward way although you have to stick to the instance mode.

---

<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:** [August 15, 2021, 6:07pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/6 "2021-08-15T18:07:16Z")

</div>

> [@micuat](#):
>
> I guess you are passing the p5 instance as an argument to the modules, right?

Nope! In global mode its instance reference is stored in p5._instance_ static property:

```auto
export default class Ball {
  constructor(world, p = p5.instance) {
    this.world = world;
    this.vel = (this.p = p).createVector();
    this.body = this.c = null;
    this.respawn();
  }

```

> [@micuat](#):
>
> … although you have to stick to the instance mode.

My both online module examples use p5.js’ global mode.

The “Matter.js Bouncing Colorful Balls” is also available in p5js’ instance mode.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 15, 2021, 6:33pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/7 "2021-08-15T18:33:38Z")

</div>

I see! So it’s in the global mode but you need to reference the instance. Also `setup` / `draw` has to be defined as a member of `window` to be picked up by p5.js. Based on your code I adapted the OP’s code:

> **[Glitch](https://glitch.com/edit/#!/p5-global-module)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

---

<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:** [August 15, 2021, 6:42pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/8 "2021-08-15T18:42:28Z")

</div>

> [@micuat](#):
>
> Also `setup` / `draw` has to be defined as a member of `window` to be picked up by p5.js.

That’s right! A JS module got 2 global contexts: A private 1 and a shared 1.

Explicitly appending to _window_ or _globalThis_ assures those properties can be accessed by both vanilla & module scripts which are sharing the same global context.

---

<div class="post-metadata">

**Author:** ![JaPatProccesingDis](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@JaPatProccesingDis](https://discourse.processing.org/u/JaPatProccesingDis)\
**Post date:** [August 16, 2021, 4:11am UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/9 "2021-08-16T04:11:19Z")

</div>

It does work @javagar. Thank you so much!!

---

<div class="post-metadata">

**Author:** ![JaPatProccesingDis](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@JaPatProccesingDis](https://discourse.processing.org/u/JaPatProccesingDis)\
**Post date:** [August 22, 2021, 3:01pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/10 "2021-08-22T15:01:20Z")

</div>

Thank you @micuat! I was curious about using the import/export functionality in p5.js