Site intégré bloqué à "Chargement des Discussions"

Soutien
1

Bonjour ! J’ai ce problème en essayant d’intégrer Discourse dans notre application Web NextJS. J’ai déjà essayé de chercher des réponses dans les fils de discussion existants qui abordent la même erreur, mais je n’ai pas réussi à trouver une solution à mon problème.

Voici à quoi ressemble notre code d’intégration :

<script id="discourse" type="text/javascript" data-nscript="afterInteractive">DiscourseEmbed = {
              discourseUrl: 'https://qanvast.discourse.group/',
              discourseEmbedUrl: 'https://web-uat.qanvast.com/sg/interior-design-singapore/forefront-interior-the-alcove-26226?image=769596',
              // className: 'CLASS_NAME',
            };

            (function() {
              var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
              d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
              (document.getElementsByTagName('head')[0]
              || document.getElementsByTagName('body')[0]).appendChild(d);
            })();</script>

Sur le front-end, cela reste bloqué sur « Chargement des discussions… ». Au début, j’ai pensé que cela avait quelque chose à voir avec la CSP, mais j’ai déjà ajouté le domaine à la liste blanche d’intégration. Aucune erreur ne s’affiche dans les journaux de la console ni dans les appels réseau.

Je suis bloqué sur ce problème depuis quelques heures maintenant, donc toute aide serait appréciée.

1 « J'aime »
2

Salut @Edrian_C_Bertulfo bienvenue :wave:

Avez-vous suivi ce sujet ? C’est comme ça qu’il faut faire, mais je n’ai aucune idée si cela fonctionnera pour une application web NexJS…

3

Bonjour Lilly !

Merci pour votre réponse. J’ai suivi les instructions de ce post, et je suis toujours bloqué avec le problème infini de « Chargement de la discussion… ».

1 « J'aime »
4

Avez-vous fini par trouver une solution ?

5

J’ai aussi ce problème avec next.js. Il reste bloqué sur « chargement de la discussion » lors du premier chargement (avant la création du sujet). Si je rafraîchis, les commentaires/démarrer la discussion s’affichent - donc il crée le sujet correctement pour moi, mais ne met pas à jour l’état de chargement (il faut rafraîchir pour afficher l’état mis à jour avec la zone de commentaire).

Ce serait bien s’il y avait un rappel ou quelque chose pour vous faire savoir que le sujet est créé car il n’est pas idéal de devoir rafraîchir la page. Je ne sais pas si c’est possible avec un iframe.

6

Hmm, il ne se charge jamais vraiment, même après la création des sujets…
Du moins, pas pour moi.

Des astuces ?

7

Voici ce que j’ai dans ma prochaine application. Cela fonctionne comme je l’ai mentionné précédemment - il faut appuyer sur actualiser. Faites-moi savoir si cela fonctionne.

Parfois, je dois actualiser plusieurs fois ou attendre un moment puis actualiser pour passer le message « chargement de la discussion »

<DiscourseComments
          discourseUrl="https://discourseurl.com/"
          discourseEmbedUrl={embedUrl}
          username="system"
        />

composant :

"use client"

import { useEffect, useRef } from "react"

/**
 * Un composant React pour intégrer les commentaires Discourse sur un site Web
 *
 * @param {Object} props - Les props du composant
 * @param {string} props.discourseUrl - L'URL de votre instance Discourse (y compris la barre oblique finale)
 * @param {string} [props.discourseEmbedUrl] - L'URL de la page actuelle (pour la création automatique de sujets)
 * @param {number} [props.topicId] - L'ID d'un sujet Discourse existant (alternative à discourseEmbedUrl)
 * @param {string} [props.username] - Le nom d'utilisateur pour la création de sujets
 * @param {string} [props.className] - Le nom de la classe CSS à ajouter à l'intégration
 * @param {string} [props.referrerPolicy] - La politique de référent pour l'iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Empêcher l'initialisation en double
    if (initialized.current) return
    initialized.current = true

    // Valider les props requis
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl est requis")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: discourseEmbedUrl ou topicId doit être fourni")
      return
    }

    // Configurer l'intégration Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Définir l'objet global DiscourseEmbed
    window.DiscourseEmbed = config

    // Charger le script d'intégration Discourse
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Nettoyage
    return () => {
      document.head.removeChild(script)
      delete window.DiscourseEmbed
    }
  }, [discourseUrl, discourseEmbedUrl, topicId, className, referrerPolicy])

  return (
    <>
      <div id="discourse-comments"></div>
      {username && <meta name="discourse-username" content={username} />}
    </>
  )
}