# CodePen Problem - Finance library blocking P5

**URL:** <https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279>\
**Category:** Libraries\
**Created:** [December 24, 2021, 3:53pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279 "2021-12-24T15:53:09Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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:** [December 25, 2021, 6:24am UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279/2 "2021-12-25T06:24:28Z")

</div>

> [@rms2256](#):
>
> Now, the P5 sketch simply does not even appear.

The reason why p5js doesn’t “appear” is b/c your sketch contains the keyword `import`.

Any JS file containing any of these 2 keywords `import` & `export` is considered an ES module:

> **[JavaScript modules - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)**
>
> This guide gives you all you need to get started with JavaScript module syntax.

In order for the p5js library to find & callback your functions **setup()** & **draw()** they have to be in the outer global context.

We can explicitly place anything in the outer global context by appending it in the property _window_ or _globalThis_:

> **[globalThis - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)**
>
> The globalThis global property contains the global this value, which is usually akin to the global object.

> [@How to use export & import in p5.js](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724/8):
>
> 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.

This is the model you need to follow in order to have callbacks **setup()** & **draw()** in the outer global context on your own ES module sketch:

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/v1.0.6/sketch.js#L13-L14>

> <https://github.com/GoToLoop/ML-Matrix-P5JS-Template/blob/v1.0.6/sketch.js#L20-L23>

---

_[View the full topic](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279)._