# Browserify to require NPM Modules

**URL:** <https://discourse.processing.org/t/browserify-to-require-npm-modules/28242>\
**Category:** Libraries\
**Created:** [March 4, 2021, 1:34am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242 "2021-03-04T01:34:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![diogorsergio](https://avatars.discourse-cdn.com/v4/letter/d/f6c823/32.png) [@diogorsergio](https://discourse.processing.org/u/diogorsergio)\
**Post date:** [March 4, 2021, 1:34am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242/1 "2021-03-04T01:34:08Z")

</div>

Hi,

I’ve been playing around p5.js and manage to get the sketches running and rendering on the browser with VS code + Live Server.

I wanted to take advantage of NPM modules with the require, but if I use browserify and switch the sketch.js for the bundle.js in the index.html the sketch doesn’t render anymore.

Does anyone has browserify working with p5.js?

Thanks in advance!

---

<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:** [March 4, 2021, 7:21am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242/2 "2021-03-04T07:21:18Z")

</div>

Hi! Welcome to the forum 🙂 I do often work with npm/browserify with p5.js. For example

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

Do you want to be more specific? Can you share your project so we can check?

---

<div class="post-metadata">

**Author:** ![diogorsergio](https://avatars.discourse-cdn.com/v4/letter/d/f6c823/32.png) [@diogorsergio](https://discourse.processing.org/u/diogorsergio)\
**Post date:** [March 5, 2021, 1:22am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242/3 "2021-03-05T01:22:16Z")

</div>

Hi @micuat,

I’ve pushed the test file I was working on, to git here: [GitHub - diogorsergio/p5-test](https://github.com/diogorsergio/p5-test)  
Can you have a look? To see if you can see whats happening? It would be really appreciated.

I was trying to use the require method to load a npm module `nice-color-palettes`.  
So when the p5 skech was working what I did was:

1. `npm init`
2. `npm install nice-color-palettes` sketch.js is already requiring it.
3. `npm install --global browserify`
4. `browserify sketch.js > bundle.js`

After

1. Change index.html to load bundle.js instead of sketch.js.
  - It loads the npm module sucessfuly, console is logging the array that it returns of colors, but the original sketch fails to load on the page.

2. Change index.html back to sketch.js
  - Npm module fails `sketch.js:1 Uncaught ReferenceError: require is not defined`, but now the sketch loads ok.

Thanks!

---

<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:** [March 5, 2021, 11:55am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242/4 "2021-03-05T11:55:28Z")

</div>

Thanks for the detailed info. Have you already worked with browserify before? The idea is that you add all the dependencies in package.json (this case p5.js - note that the npm module is called “p5”). Bundling the sketch without p5 might work but not the way how it is intended.

I imported your project and made it working here - check package.json and app/sketch.js

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

The problem is that it seems p5.js as a module does not support global mode ([more here](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)). When I copied the instance-mode code from the link it works fine. I’m not sure if there is a way to make global mode here, but generally I would recommend switching to instance mode if you are using npm/browserify because weird things can happen around the namespace.

---

<div class="post-metadata">

**Author:** ![diogorsergio](https://avatars.discourse-cdn.com/v4/letter/d/f6c823/32.png) [@diogorsergio](https://discourse.processing.org/u/diogorsergio)\
**Post date:** [March 6, 2021, 12:46am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242/5 "2021-03-06T00:46:23Z")

</div>

Awesome that worked! Thanks for that! 🙂