# Impossible d'obtenir le js dans mon composant à compiler SyntaxError : Un champ privé doit être utilisé dans une classe englobante

**URL:** <https://meta.discourse.org/t/cannot-get-the-js-in-my-component-to-compile-syntaxerror-private-field-must-be-used-in-an-enclosing-class/327492>\
**Category:** Development\
**Created:** [Septembre 21, 2024, 4:52 UTC](https://meta.discourse.org/t/cannot-get-the-js-in-my-component-to-compile-syntaxerror-private-field-must-be-used-in-an-enclosing-class/327492 "2024-09-21T04:52:21Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![SupportGeek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supportgeek/32/373337_2.png) [@SupportGeek](https://meta.discourse.org/u/SupportGeek)\
**Post date:** [Septembre 21, 2024, 4:52 UTC](https://meta.discourse.org/t/cannot-get-the-js-in-my-component-to-compile-syntaxerror-private-field-must-be-used-in-an-enclosing-class/327492/1 "2024-09-21T04:52:22Z")

</div>

Au bout du compte, j’ai besoin d’un bouton «&nbsp;Nouveau sujet&nbsp;» dans le corps de la liste des sujets du thème central de Discourse. Tous les ingénieurs se plaignent qu’ils n’aiment pas le bouton «&nbsp;Démarrer une nouvelle conversation&nbsp;» qui se trouve juste en bas de la liste des sujets à l’intérieur de chaque catégorie. Ils ne veulent pas utiliser le choix du menu «&nbsp;Nouveau sujet&nbsp;» en haut car cela ne démarre pas le sujet dans la catégorie dans laquelle ils se trouvent actuellement.

J’ai exécuté cela via Llama 3.1 405B ainsi que GPT4 via [ask.discourse.com](http://ask.discourse.com), mais je n’arrive pas à obtenir une version de JavaScript qui se compile. Je reçois constamment une erreur de compilation&nbsp;: SyntaxError&nbsp;: Private field must be used in an enclosing class.

Je reçois également une erreur de registre de widgets, mais c’est parce que le widget personnalisé n’est jamais créé en raison de l’erreur de compilation JS.

J’utilise le thème Discourse Central.

```plaintext
Étant donné cette section d'en-tête :
« <script type="text/discourse-plugin" version="0.8.18">
  api.createWidget('custom-new-topic-button', {
    tagName: 'div.custom-new-topic-button',

    buildKey: () => `custom-new-topic-button`,

    html() {
      return [
        this.attach('button', {
          className: 'btn btn-primary',
          action: 'createNewTopic',
          contents: 'New Topic'
        })
      ];
    },

    click() {
      const composerController = this.container.lookup("controller:composer");
      const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");

      composerController.open({
        action: require("discourse/models/composer").default.CREATE_TOPIC,
        draftKey: require("discourse/models/composer").default.DRAFT,
        categoryId: currentCategory,
      });

      return false;
    },
  });

  api.decorateWidget('topic-list:before', (helper) => {
    if (api.getCurrentUser()) {
      helper.appendChild(helper.createWidget('custom-new-topic-button'));
    }
  });
</script>

»
Avec cette section d'en-tête
<script>
    {{#if currentUser}}
     <div>
      {{custom-new-topic-button}}
     </div>
   {{/if}}
</script>

Et ce CSS

.topic-list-body::before {
    content: "";
    display: block;
    position: relative; /* Important pour permettre le positionnement absolu à l'intérieur */
  }
  
  .topic-list-body-new-topic {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    background: #f2f3f5;
    border-bottom: 1px solid #ccc;
  }
  .custom-new-topic-button .btn.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
  }

```

C’était mon code original, la dernière recommandation est

```plaintext
<script type="text/discourse-plugin" version="0.8.18">
  api.createWidget('custom-new-topic-button', {
    tagName: 'div.custom-new-topic-button',

    buildKey() {
      return 'custom-new-topic-button';
    },

    defaultState() {
      return {};
    },

    html() {
      return [
        this.attach('button', {
          className: 'btn btn-primary',
          action: 'createNewTopic',
          contents: 'New Topic'
        })
      ];
    },

    createNewTopic() {
      const composerController = this.container.lookup("controller:composer");
      const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");
      const Composer = require("discourse/models/composer").default;

      composerController.open({
        action: Composer.CREATE_TOPIC,
        draftKey: Composer.DRAFT,
        categoryId: currentCategory,
      });

      return false;
    },
  });

  api.decorateWidget('topic-list:before', (helper) => {
    if (api.getCurrentUser()) {
      helper.appendChild(helper.createWidget('custom-new-topic-button'));
    }
  });
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/cannot-get-the-js-in-my-component-to-compile-syntaxerror-private-field-must-be-used-in-an-enclosing-class/327492)._