Raw Github js file not loading (direct link) like CDN

Question

I created a coding library for the public to use by putting a <script> tag in the <head> tag on the page but when I try to use the a function it says undefined when it ran.

. I linked the url to the index.js file but it doesn't load it to the client user.

<head>
<script src="https://github.com/<username>/<repo>/blob/master/index.js"></script>
</head>

When I run a console.log(ranInteger(1,10)) which I have defined in my index.js file but I get a ranInteger is not defined error. All help is welcome!

@nihiser — No, that's an HTML document showing a syntax highlighted version of the file. — Quentin, Jul 14 '20 at 17:57
**Github is not a web hosting service or CDN**. It hosts Git repositories. If you want a CDN use CloudFront or something. — Quentin, Jul 14 '20 at 17:57
I did try using `github user content ` to the same problem @Quentin also people do use git as a download site for releases — Hello, Jul 14 '20 at 18:00
@JoeMcMullan — No, different problem. Similar cause: Github is not a web hosting service or CDN. It hosts Git repositories. If you want a CDN use CloudFront or something. — Quentin, Jul 14 '20 at 18:02

score 1 · Accepted Answer · answered Jul 14 '20 at 18:09

1

Technically speaking, GitHub doesn't allow source code to be accessed from their site like a CDN, however from This StackOverflow Question, there is a workaround. I wouldn't recommend using it, but you can use "https://cdn.jsdelivr.net/gh/" to get your script to work (from user @anayarojo on StackOverflow).

The url in your case would look like this:

https://cdn.jsdelivr.net/gh/McJoe21/coderslib/index.js

The pattern for the URL is: https://cdn.jsdelivr.net/gh/<username>/<repository>/<file>

answered Jul 14 '20 at 18:09

JohnnyLeek

160
10

@JoeMcMullan That's gonna be a separate problem. module.exports doesn't work as a vanilla javascript feature, module.exports is only going to work in a node.js runtime environment, so you can't just import it in a plain HTML page – JohnnyLeek Jul 14 '20 at 18:33
But @JohnnyLeek shouldn't the browser just ignore that part the do the rest – Hello Jul 14 '20 at 18:57

score 0 · Answer 2 · answered Jul 28 '22 at 10:05

You cannot load JavaScript from raw version of Github because the content type(MIME type) is text/plain, not application/javascript or text/javascript. This is to stop you using Github as a CDN. Still you can achieve serving raw file as cdn in the following way, using cdn.jsdelivr.net.

https://cdn.jsdelivr.net/gh/<github-username>/<github-repo-name@branch-name>/<filename>

If file is at main branch, no need to include in branch section after @. If you mention also, it'll work.

For more reference

score -1 · Answer 3 · edited Feb 27 '23 at 12:06

-1

The file you're attempting to import is a just GitHub viewer for the file. To import the raw data for the file, you'd want to use this code below:

<script>
   const source = 'https://raw.githubusercontent.com/<username>/<repo>/master/index.js';
   fetch(source).then((response) => {
      return response.text()
   }).then((response) => {
      eval(response);
   }).catch((error) => {
      console.error(`An error occured while attempting to load the "${source}" resource!`);
      console.error(error);
   });
</script>

Since the GitHub website does not directly allow the import of their user content, you will need to wrap your source URL in the above fetch-eval block to fetch the file content directly.

edited Feb 27 '23 at 12:06

Hello

77
1
13

answered Jul 14 '20 at 18:02

spacefluff432

566
3
13

This wouldn't work either: https://stackoverflow.com/a/19285701/12513827 – JohnnyLeek Jul 14 '20 at 18:03
@JohnnyLeek i updated the response, this should work now. – spacefluff432 Jul 14 '20 at 18:09
Yep, just tested it. It works. Although "module is not define" came up, because i tested it in a browser. but i defined it and made exports a setter that console logged, and sure enough ,i got some output. – spacefluff432 Jul 14 '20 at 21:40
This answer is very old, and yeah, probably not gonna work anymore. But I'm sure there is a better solution out there than what I came up with – spacefluff432 Aug 17 '22 at 11:05

Raw Github js file not loading (direct link) like CDN

3 Answers3

Linked