Using the NPM plugin

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 is helpful, and so are the comments in this thread and this thread, 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 package. This is a package that can be installed, as it is available on 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 looks like a module within the library.

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

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.

1 Like

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.

1 Like

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.

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 :sweat_smile:

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.

3 Likes

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 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.

3 Likes

Alright, here’s a video with a couple of examples 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 :slight_smile:

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! :slight_smile:

3 Likes

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.

4 Likes