NPM Import Is Undefined

I tried using the NPM plugin to import the json-diff library. The library appears in the bind window, but it’s undefined and doesn’t work. Any ideas why?

image

because the library loaded from unpkg is not made to be loaded in the browser as is. if you reload the editor and check the browser’s dev tools you should see some errors in the console

@dorilama is correct. The so-called “NPM” import actually uses a service called “unpkg.com” that provides mostly-compiled versions of these packages. Some work with a browser out of the box, but most don’t.

If you look at the package through UNPKG - json-diff you’ll see a file directory. Look at the package.json and find the “main” entry - it points to lib/index.js.

Then go open lib, then open index.js. You’ll see the contents of the code.

The trick to this is looking for “require” statements. That’s a node thing that won’t work in the browser (a few exceptions to this, but its a pretty good rule of thumb). If you see “require(‘somepackage’)” that’s a sign it won’t work through this entry point.

Doesn’t mean you can’t use it at all - you can look into compiling another module that you then import to weweb. But that’s a bit more code work, so use this technique to evaluate which package in “npm” will actually work easily in the weweb context.

1 Like