# Using the NPM plugin

**URL:** <https://community.weweb.io/t/using-the-npm-plugin/4752>\
**Category:** How do I?\
**Created:** [October 5, 2023, 4:36pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752 "2023-10-05T16:36:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![caffeinatedwes](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/caffeinatedwes/32/625_2.png) [@caffeinatedwes](https://community.weweb.io/u/caffeinatedwes)\
**Post date:** [October 5, 2023, 4:36pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/1 "2023-10-05T16:36:06Z")

</div>

First, congrats to the WeWeb team for launching the NPM plugin! Our team is really excited about the possibilities it unlocks.

However, from conversations I’ve had with other developers, it’s not entirely clear how to use it or what is possible yet, and I want to create this thread to help centralize the discussion a bit.

The documentation [here](https://docs.weweb.io/plugins/extensions/npm.html#add-plugin) is helpful, and so are the comments in [this thread](https://community.weweb.io/t/private-npm-packages/4736/2) and [this thread](https://community.weweb.io/t/where-to-see-new-update-notes/4728/4), but besides that, we’re at a loss for how to take advantage of it. It seems we’re stuck on understanding this nuance WeWeb addressed in the documentation—

> For the loaded library to be usable, it must be registered in the window. This import method is unique to each library, even though most libraries utilize this method.

**How have others been able to use it, and what have you learned?**

I’ll start first—

I tried to use the [phone](https://www.npmjs.com/package/phone) package. This is a package that can be installed, as it is available on [unpkg.com](http://unpkg.com).

However, when we try to use it, we get an error related to the utility\_1 variable (“cannot access utility\_1 before initialization”), which [when looking at the code in unpkg.com](https://unpkg.com/phone@3.1.41/dist/index.js) looks like a module within the library.

 ![CleanShot 2023-10-05 at 10.28.15@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/758897aa8122c3f98e017c5376d144cdfb43092a.png)

I tried looking up a way to force this to initialize, but wasn’t able to find a solution.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 5, 2023, 4:39pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/2 "2023-10-05T16:39:32Z")

</div>

I think someone mentioned it here, might be something about dependencies and package.json and the dependecies not being declared in a right way. But I’m not that proficient to confirm this.

---

<div class="post-metadata">

**Author:** ![mauromequelussi](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mauromequelussi/32/10223_2.png) [@mauromequelussi](https://community.weweb.io/u/mauromequelussi)\
**Post date:** [October 5, 2023, 4:52pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/3 "2023-10-05T16:52:11Z")

</div>

I really felt the same difficulty. I saw a huge possibility in the construction, but I didn’t understand the limitations and how to know what to use, since not all npm packages work.

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [October 5, 2023, 6:57pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/4 "2023-10-05T18:57:33Z")

</div>

A video from the team would be most welcome. Obviously it is in “beta” - but even more of a reason to publish a “how to use this and it’s limitations” video.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 5, 2023, 7:01pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/5 "2023-10-05T19:01:07Z")

</div>

Yep, we’re working on it. We actually released the plugin a couple of weeks before we thought we would so we caught ourselves off-guard 😅

We’ll try to get it done tomorrow or Monday. If it’s too tight, it’ll have to wait until the week starting October 16th because a lot of the team will be attending the NoCode Summit in Paris.

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [October 5, 2023, 7:29pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/6 "2023-10-05T19:29:27Z")

</div>

> [@caffeinatedwes](#):
>
> This is a package that can be installed, as it is available on [unpkg.com](http://unpkg.com).

Every package published on npm is served by unpkg. It doesn’t mean that is usable as is on the browser, and if it works on the browser it doesn’t mean that it works with the plugin.

As I said [here](https://community.weweb.io/t/where-to-see-new-update-notes/4728/8) it looks like that libraries need to be packed as umd, need to add an instance to the window and need to correctly specify what file unpkg needs to serve.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 6, 2023, 3:11pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/7 "2023-10-06T15:11:16Z")

</div>

Alright, here’s a [video with a couple of examples](https://youtu.be/cS_jLxfHzXs?si=6SJjdbPz2cC-X6sx) using **lodash and papaparse**.

As this is a beta plugin, we expect you’ll encounter issues we didn’t anticipate. Please do NOT hesitate to share them all with us.

## Improvement suggestion?

If it’s **an improvement suggestion** , adding it in this thread would be perfect. I’ll make sure to put together a recap for the product team 🙂

## Question or difficulty using the plugin?

If it’s **an issue using a specific package or a question about how to do something** , I’d recommend creating a new topic with [NPM] at the beginning of the title to help us identify it quickly and look into it. For example, “[NPM] Trying but failing to use xxx package”

As always, we want to make this the best plugin possible and will take your feedback on board so don’t hesitate to ask questions and make improvement suggestions! 🙂

---

<div class="post-metadata">

**Author:** ![mauromequelussi](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mauromequelussi/32/10223_2.png) [@mauromequelussi](https://community.weweb.io/u/mauromequelussi)\
**Post date:** [October 6, 2023, 4:06pm UTC](https://community.weweb.io/t/using-the-npm-plugin/4752/8 "2023-10-06T16:06:19Z")

</div>

> [@Joyce](#):
>
> If

Now yes, with this video it became very clear. Thank you, it is more powerful than I imagined, especially for showing me all the formulas and methods.
