# Add\_javascript\_url is not working in my XBlock

**URL:** <https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055>\
**Category:** Development\
**Tags:** juniper\
**Created:** [January 17, 2021, 11:11am UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055 "2021-01-17T11:11:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joan\_Rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/joan_rodriguez/32/2013_2.png) [@Joan\_Rodriguez](https://discuss.openedx.org/u/Joan_Rodriguez)\
**Post date:** [January 17, 2021, 11:11am UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/1 "2021-01-17T11:11:18Z")

</div>

Hello,

I’m trying to develop an XBlock that shows real time data using some charts, from javascript libraries using a url. I tried two approaches.

1. Adding the 
  1. Loading the resulrces directly in the python file, in student\_view, with add\_javascript\_url:

html = self.resource\_string(“static/html/myxblock.html”)  
context = context or {  
key: getattr(self, key)  
for key in self.editable\_fields  
}  
frag = Fragment(html.format(\*\*context))  
frag.add\_css(self.resource\_string(“static/css/myxblock.css”))  
frag.add\_javascript(self.resource\_string(“static/js/src/myxblock.js”))

**frag.add\_javascript\_url("[//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js)")**  
**frag.add\_javascript\_url("[//cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js](https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js)")**

frag.initialize\_js(‘MyXBlock’)

return frag

In both cases, I get the following errors:  
_The resource from [//cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js](https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js)" was blocked due to MIME type (“text/html” mismatch (X-Content-Type-Options: nosniff)._

I also tried to specify the MIME type with ‘application/javascript’, but I get the same result.

Hope you can guide me in adding external javascript files from url’s

Thanks  
Joan

---

<div class="post-metadata">

**Author:** ![braden](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/braden/32/46_2.png) [@braden](https://discuss.openedx.org/u/braden)\
**Post date:** [January 18, 2021, 10:46pm UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/2 "2021-01-18T22:46:32Z")

</div>

Hi @Joan_Rodriguez,

There’s a simple reason for that - you have the wrong URL.

Just click on [https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js](https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/js/bootstrap-switch-button.min.js) in your browser and you’ll see that it’s not a JavaScript file, it’s an HTML document with an error message.

Hopefully once you get the right URL it will be working fine 🙂

---

<div class="post-metadata">

**Author:** ![Joan\_Rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/joan_rodriguez/32/2013_2.png) [@Joan\_Rodriguez](https://discuss.openedx.org/u/Joan_Rodriguez)\
**Post date:** [February 1, 2021, 3:44pm UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/3 "2021-02-01T15:44:26Z")

</div>

Hi @braden,

Thanks, that fixed the issue for that js file. However, let me go back to this one:

**frag.add\_javascript\_url("[//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js)")**

This script is loaded correctly, it basically implements some fancy charts from chartjs.  
In the javascript file of the xblock e.g. “frag.add\_javascript(self.resource\_string(“static/js/src/myxblock.js”))”, i define the chart by following the documentation in [Introduction · Chart.js documentation](https://www.chartjs.org/docs/latest/), as.

let plot = new Chart(…).

The problem is when I load the xblock in the demo course, where I get an error in the console:

Uncaught ReferenceError : Chart is not defined.

Thanks a lot  
Joan

---

<div class="post-metadata">

**Author:** ![braden](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/braden/32/46_2.png) [@braden](https://discuss.openedx.org/u/braden)\
**Post date:** [February 1, 2021, 11:08pm UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/4 "2021-02-01T23:08:40Z")

</div>

> [@Joan\_Rodriguez](#):
>
> Chart is not defined.

I’m not sure, it could be any number of things. Perhaps in the HTML, your JavaScript is appearing before the `<script>` tag that loads Chart.js, so Chart.js is not loaded yet?

Instead of loading it via `add_javascript_url`, you could try using requirejs, which is available already in the XBlock JS runtime environment.

```javascript
window.RequireJS.require(['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js'], () => {
    const plot = new Chart(...);
});

```

Even better would be to use Webpack or Rollup or TypeScript to transpile and bundle your XBlock’s code and dependencies into a single minified, tree-shaken file.

---

<div class="post-metadata">

**Author:** ![Joan\_Rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/joan_rodriguez/32/2013_2.png) [@Joan\_Rodriguez](https://discuss.openedx.org/u/Joan_Rodriguez)\
**Post date:** [February 4, 2021, 8:27am UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/5 "2021-02-04T08:27:45Z")

</div>

Hello @braden,

Using RequireJS fixed the issue, thanks!.

However, I was learning about what you said about transpiling the XBlock with Webpack or others, but I can’t manage to understand how it works. What is exactly the process of transpiling the XBlock and create a tree-shaken file? Where can I find documentation on how to do it?

My problem now is that my XBlock works good in the SDK server but not in the LMS. For example, my javascript file should enter this method when the page is loaded, using

window.onload = async function() {  
console.log(“Some functionality”)  
await someFunction()  
}

Thanks a lot  
Joan

---

<div class="post-metadata">

**Author:** ![braden](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/braden/32/46_2.png) [@braden](https://discuss.openedx.org/u/braden)\
**Post date:** [February 5, 2021, 12:24am UTC](https://discuss.openedx.org/t/add-javascript-url-is-not-working-in-my-xblock/4055/6 "2021-02-05T00:24:41Z")

</div>

> [@Joan\_Rodriguez](#):
>
> What is exactly the process of transpiling the XBlock and create a tree-shaken file? Where can I find documentation on how to do it?

It’s how I think XBlock JavaScript _should_ be done going forward, but as far as I know, nobody has yet done it that way. So it would require some innovation and exploration. I’ve been hoping to prepare a demo of that (or convert an existing XBlock to do that) one of these days, but it’s unfortunately been on the back burner for a while.

That said, [Ramshackle](https://github.com/open-craft/ramshackle) is a Studio plugin that I created, and it uses TypeScript to do that (transpile the source code and bundle in all the requirements like React, producing a single `.js` file; it’s done with the `make js-watch` command). So I’d likely use a very similar approach for an XBlock.

> [@Joan\_Rodriguez](#):
>
> My problem now is that my XBlock works good in the SDK server but not in the LMS. For example, my javascript file should enter this method when the page is loaded, using
> 
> window.onload = async function() {  
> console.log(“Some functionality”)  
> await someFunction()  
> }

Using `window.onload` in that manner is not dependable, because the XBlock is often (always?) loaded “lazily”, after the `window.onload` event has already fired.

Instead, your JavaScript code should contain some main function like:

```javascript
function MyBlock(runtime, element, configuration) {
    console.log("Some functionality");
}

```

and then in the python `student_view`, you tell the runtime to run that function when the block loads, like this:

```auto
    configuration = {} # Optional data to pass from python to JavaScript
    fragment.initialize_js('MyBlock', configuration)
    return fragment

```

Check the source code of almost any XBlock for an example.