# Difficulty loading js function from raw Github

**URL:** <https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982>\
**Category:** Help\
**Created:** [July 12, 2018, 7:59pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982 "2018-07-12T19:59:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![john-clarke](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/john-clarke/32/219_2.png) [@john-clarke](https://talk.observablehq.com/u/john-clarke)\
**Post date:** [July 12, 2018, 7:59pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/1 "2018-07-12T19:59:24Z")

</div>

I’m trying to import `https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js` but Observable says “Unable to load module” and I see that my browser has an error:

> Refused to execute script from ‘[https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js](https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js)’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.

Is there a workaround for this?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [July 12, 2018, 8:18pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/2 "2018-07-12T20:18:14Z")

</div>

> [@john-clarke](#):
>
> Is there a workaround for this?

Yes, there is! Use [RawGit](https://rawgit.com) to fetch the file. RawGit will serve files with the appropriate content type, and for Chrome there’s even an [extension](https://chrome.google.com/webstore/detail/rawgit-for-github/mobohgekahaknpfhiknjgepliebadkko) to get the URL while surfing Github.

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [July 12, 2018, 11:19pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/3 "2018-07-12T23:19:54Z")

</div>

That said, using RawGit will only get you halfway in this instance - that file is just a function, with no export syntax. We [support `require()` with AMD/UMD](https://beta.observablehq.com/@tmcw/introduction-to-require) modules, and `import()` with ES6 modules. You can get around this by doing:

```auto
MRG32k3a = require("https://cdn.rawgit.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js").catch(
  () => window.MRG32k3a
)

```

But ideally the better-random-numbers-for-javascript-mirror project supports any of UMD, AMD, CommonJS, or ES6 modules.

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [July 13, 2018, 9:04am UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/4 "2018-07-13T09:04:40Z")

</div>

> [@john-clarke](#):
>
> [https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js](https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js)

Mike has solved this problem once  
Here is the reusable function which you can use

> ```
> async function requireFromGithub(jsFileUrl,prop){
> const response = await fetch(jsFileUrl);
> const blob = await response.blob();
> return require(URL.createObjectURL(blob)).catch(() => window[prop]);
> }
> 
> ```

You can use it like this

`requireFromGithub('https://raw.githubusercontent.com/nquinlan/better-random-numbers-for-javascript-mirror/master/support/js/MRG32k3a.js','MRG32k3a')`

---

<div class="post-metadata">

**Author:** ![john-clarke](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/john-clarke/32/219_2.png) [@john-clarke](https://talk.observablehq.com/u/john-clarke)\
**Post date:** [July 14, 2018, 5:27pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/5 "2018-07-14T17:27:50Z")

</div>

Thanks Tom, this is helpful.

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [July 30, 2018, 4:59am UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/6 "2018-07-30T04:59:47Z")

</div>

I have created notebook which shows how to load different kind of data from some tricky, but commonly used endpoints

It covers, loading data from

- Google sheets (simple and multiple sheets)
- Github
- Cors restricted endpoint
- From `http` endpoint (to `https`)
- Excel file from Github
- Scraping & Parsing
- Requiring JS File from Github (like above question)

Hope it will be usable to someone

> **[Fetcher usage](https://observablehq.com/@bumbeishvili/fetcher-usage)**
>
> An Observable notebook by David B..

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [October 13, 2018, 1:39pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/7 "2018-10-13T13:39:28Z")

</div>

RawGit is shutting down, so accepted answer will no longer work from 2019

> <https://twitter.com/rawgit/status/1049360165030567937>

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [October 13, 2018, 3:02pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/8 "2018-10-13T15:02:42Z")

</div>

Here is a self-contained snippet that demonstrates how to require a JavaScript file directly from GitHub (using the global require-catch pattern):

```auto
MRG32k3a = {
  const response = await fetch("https://raw.githubusercontent.com"
      + "/nquinlan/better-random-numbers-for-javascript-mirror"
      + "/master/support/js/MRG32k3a.js");
  const blob = await response.blob();
  const url = URL.createObjectURL(blob);
  return require(url).catch(() => window.MRG32k3a);
}

```

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [October 14, 2018, 7:45am UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/9 "2018-10-14T07:45:22Z")

</div>

Wow, that’s … sad. I loved that service. @mbostock Any chance to get some statistics on how many notebooks and blocks will be affected by this?

---

<div class="post-metadata">

**Author:** ![andreasplesch](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/andreasplesch/32/676_2.png) [@andreasplesch](https://talk.observablehq.com/u/andreasplesch)\
**Post date:** [October 18, 2018, 4:43pm UTC](https://talk.observablehq.com/t/difficulty-loading-js-function-from-raw-github/982/10 "2018-10-18T16:43:37Z")

</div>

[https://raw.githack.com/](https://raw.githack.com/) looks llike a drop in replacement.