Difficulty loading js function from raw Github

Community Help
1

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’ because its MIME type (‘text/plain’) is not executable, and strict MIME type checking is enabled.

Is there a workaround for this?

2

Yes, there is! Use RawGit to fetch the file. RawGit will serve files with the appropriate content type, and for Chrome there’s even an extension to get the URL while surfing Github.

3

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 modules, and import() with ES6 modules. You can get around this by doing:

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.

4 Likes
4

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')

5 Likes
5

Thanks Tom, this is helpful.

6

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

4 Likes
7

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

1 Like
8

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

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);
}
5 Likes
9

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?

10

https://raw.githack.com/ looks llike a drop in replacement.

2 Likes