How to import NPM package in JSFiddle?

Question

I would like to use valid-url to validate some URLs using JSFiddle so that I can share it later. I tried adding a link to the index.js file from Github (https://raw.githubusercontent.com/ogt/valid-url/master/index.js) but Fiddle says:

Github is not a CDN, using it as such will cause issues with loading the file. Do you still with to it?

And obviously when I try to use it, an error is thrown:

Refused to execute script from [...] because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

So, is there any way to use npm packages in a JSFiddle? Or any workaround to achieve this?

Answer 1

Use unpkg.com. They allow you to load any npm module from the browser like a CDN.

Answer 2

Using UNPKG you can load any file from any package following this pattern

https://unpkg.com/:package@:version/:file

So, if you add

https://unpkg.com/[email protected]/

Then you'll get this (as shown in the next image)

If you specify the index.js file

https://unpkg.com/[email protected]/index.js

Then you'll get this (as shown in the next image)

You'll then be able to use it in your fiddles by adding the Resources you want to.