# Как загрузить библиотеку в компонент темы

**URL:** <https://meta.discourse.org/t/how-to-load-library-in-a-theme-component/276621>\
**Category:** Development\
**Created:** [25.Август.2023 14:54:17 UTC](https://meta.discourse.org/t/how-to-load-library-in-a-theme-component/276621 "2023-08-25T14:54:17Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [25.Август.2023 14:54:17 UTC](https://meta.discourse.org/t/how-to-load-library-in-a-theme-component/276621/1 "2023-08-25T14:54:17Z")

</div>

из [How to require external libraries in a component helper file? - #2 by merefield](https://meta.discourse.org/t/how-to-require-external-libraries-in-a-component-helper-file/195392/2)

> [@merefield](#):
>
> Вы можете использовать подход, который я применяю в [GitHub - merefield/discourse-tc-tag-cloud: Компонент темы Discourse, отображающий облако тегов над списками тегов на странице тегов](https://github.com/merefield/discourse-tc-tag-cloud)

Привет, @merefield — всё ещё актуален ли этот способ?

Я пытаюсь подключить [qrcode.js](https://davidshimjs.github.io/qrcodejs/), чтобы генерировать QR-код в браузере.

Также возникает блокировка из-за CSP. Не понимаю, как это может быть проблемой CSP, если ресурс находится на том же хосте. Это происходит на продакшн-сервере с использованием `discourse_theme` для отладки.

Я добавляю это в инициализатор:

```plaintext
import loadScript from "discourse/lib/load-script";
import { withPluginApi } from "discourse/lib/plugin-api";
// import QRCode from "discourse/lib/qrcode";
export default {
  name: "qrcode",
  ensureQRCode() {
    window.console.log(settings.theme_uploads.QRCode);
    return loadScript(settings.theme_uploads.QRCode).then(() => {
      return loadScript(settings.theme_uploads.QRCode);
    });
  },
  initialize(container) {
    withPluginApi("0.8.7", (api) => {
      api.decorateCookedElement((cooked, postWidget) => {
        const placeholderNodes = cooked.querySelectorAll(
          ".d-wrap[data-wrap=qrcode]"
        );
        this.ensureQRCode();
        // const qr = new QRCode(
        // document.getElementById("qrcode"),
        // "http://jindo.dev.naver.com/collie"
        // );
...

```

Кажется, что функция не вызывается для загрузки скрипта, если я не вызываю `this.ensureQRCode();`, чего, похоже, вы не делаете в своём компоненте.

Скрипт доступен, и я могу его получить (значит, настройки в `about.json` и `/assets/qrcode.js` указаны верно), но браузер отказывается его загружать.

---

_[View the full topic](https://meta.discourse.org/t/how-to-load-library-in-a-theme-component/276621)._