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?

You can't use code directly from GitHub, but you can include them from rawgit.com. Also, using RequireJS is probably a good idea because you won't be able to use the normal `require(...)` or `import ...` syntax on the web. — Derek 朕會功夫, Oct 20 '17 at 08:43

Lance · Answer 1 · 2018-01-18T01:30:51.083

33

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

edited Jan 18 '18 at 01:30

answered Jan 18 '18 at 01:03

Lance

75,200
93
289
503

Tiago Martins Peres · Answer 2 · 2020-09-22T09:47:15.060

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/valid-url@1.0.9/

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

If you specify the index.js file

https://unpkg.com/valid-url@1.0.9/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.

score 2 · Answer 3 · edited Nov 15 '22 at 12:13

If you want to import something from npm on the frontend, you can use https://www.skypack.dev/ which converts npm modules to ES Modules, example:

<script type="module">
  // Use 'https://cdn.skypack.dev/' + 'npm package name' + '@version its optional'
  import random from 'https://cdn.skypack.dev/canvas-sketch-util@1.10.0/random'

  console.log('A random number: ', random.range(1,10))
</script>

Here's a JSFiddle using SkyDev to load an npm module.

There are many cases that https://unpkg.com/ wouldn't handle that https://www.skypack.dev/ can, so I recommend using it whenever it's on the front-end

I wrote a slightly more complete answer here about this: How can I use a CommonJS module on JSFiddle?

How to import NPM package in JSFiddle?

3 Answers3