# How to require external libraries in a component helper file?

**URL:** https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392
**Category:** Development
**Created:** [June 29, 2021, 6:25pm UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392 "2021-06-29T18:25:33Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [June 29, 2021, 6:25pm UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/1 "2021-06-29T18:25:33Z")

</div>

I’m writing a theme component and I need to access two external libraries from a helper file. My current approach works, but it feels a bit clunky:

In my initializer:

```js
import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
import myHelper from '../lib/helper';

export default apiInitializer('0.11.1', (api) => {
  api.decorateCookedElement(
    (elem) => {
      loadScript(D3_URL).then(() => {
        loadScript(LUXON_URL).then(() => {
          ...
          myHelper(whatever, d3, luxon)
          ...
        })
      })
    },
    {id: 'discourse-xyz', onlyStream: true}
  )
});

```

Then in `myHelper.js`:

```plaintext
export default function myHelper(whatever, d3, luxon) {
  d3();
  luxon();
  ...
}

```

I tried requiring the libraries from the helper file directly, but that means I’d have to return a promise and then do `myHelper(whatever, d3, luxon).then(...)` in the initializer, which I’d rather not do for other reasons.

Is there a better approach?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [June 29, 2021, 6:44pm UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/2 "2021-06-29T18:44:34Z")

</div>

You can use the approach I use in [GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub](https://github.com/merefield/discourse-tc-tag-cloud)

> <https://github.com/merefield/discourse-tc-tag-cloud/blob/91943c7fdc032f640a7a97aa007fd2a3f34ae5fd/javascripts/discourse/components/tagcloudvis.js.es6#L8>

Note the assets are registered here:

> <https://github.com/merefield/discourse-tc-tag-cloud/blob/91943c7fdc032f640a7a97aa007fd2a3f34ae5fd/about.json#L6>

And sit in the assets folder.

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [July 2, 2021, 5:41pm UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/3 "2021-07-02T17:41:29Z")

</div>

> [@merefield](#):
>
> `settings.theme_uploads.d3Lib`

Thanks, Robert. I gave it a try but it’s not finding “theme\_uploads”. Is this something I should set up in settings.yml?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [July 3, 2021, 7:08am UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/4 "2021-07-03T07:08:34Z")

</div>

No, you shouldn’t need to do that.

I note the syntax is still in the spec: [discourse/spec/models/theme\_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/c8f4f7c235ca38b39d4b66bf9e1305410e36815e/spec/models/theme_spec.rb#L495)

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [July 3, 2021, 7:32am UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/5 "2021-07-03T07:32:53Z")

</div>

Ah, my bad. I had the wrong filename in assets. I’ve fixed it, but now I’m getting a CSP error:

```md
load-script.js:35 Refused to load the script 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' because it violates the following Content Security Policy directive: 
"script-src http://localhost:4200/logs/ http://localhost:4200/sidekiq/ http://localhost:4200/mini-profiler-resources/ http://localhost:4200/assets/ http://localhost:4200/brotli_asset/ http://localhost:4200/extra-locales/ http://localhost:4200/highlight-js/ http://localhost:4200/javascripts/ http://localhost:4200/plugins/ http://localhost:4200/theme-javascripts/ http://localhost:4200/svg-sprite/ 
'unsafe-eval' http://localhost:4200/ember-cli-live-reload.js http://localhost:4200/_lr/ /uploads". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

```

I didn’t see you use an `extend_content_security_policy` in settings.yml, so I don’t know what I’m missing.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [July 3, 2021, 10:13am UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/6 "2021-07-03T10:13:57Z")

</div>

I’ve got the uploads directory url added to my CSP src setting in any case. But I might add that which would make it more targeted 👍🏻

---

<div class="post-metadata">

### Author: ![Nacho\_Caballero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nacho_caballero/32/130189_2.png) [@Nacho\_Caballero](https://meta.discourse.org/u/Nacho_Caballero)
#### Post date: [July 3, 2021, 10:19am UTC](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/7 "2021-07-03T10:19:31Z")

</div>

Oh, you mean here? It works if I do this:

 ![CleanShot 2021-07-03 at 12.17.17@2x](https://global.discourse-cdn.com/meta/original/3X/a/5/a5860e67caca29f21cde547bdd0a046f27cd20d7.png)

I thought there was a way to do it in `settings.yml`, like this (but it doesn’t seem to work with localhost):

```plaintext
extend_content_security_policy:
  type: list
  default: "script_src: http://localhost:4200/"

```