Eingebettete Website bleibt bei "Lade Diskussionen" hängen

Unterstützung
1

Hallo! Ich habe dieses Problem, wenn ich versuche, Discourse in unsere NextJS Web App einzubetten. Ich habe bereits versucht, Antworten in den bereits vorhandenen Threads zu finden, die sich mit demselben Fehler befassen, aber ich konnte keine Lösung für mein Problem finden.

Hier sieht unser Einbettungscode aus:

<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>

Im Frontend bleibt es einfach bei “Loading Discussions…” hängen. Zuerst dachte ich, es hätte etwas mit dem CSP zu tun, aber ich habe die Domain bereits zur Einbettungs-Allowlist hinzugefügt. Es werden keine Fehler in den Konsolenprotokollen oder den Netzwerkanfragen angezeigt.

Ich stecke hier schon seit ein paar Stunden fest, daher wäre ich für jede Hilfe dankbar.

1 „Gefällt mir“
2

Hallo @Edrian_C_Bertulfo, willkommen :wave:

Hast du dieses Thema verfolgt? So geht’s, aber ich habe keine Ahnung, ob es für eine NexJS-Web-App funktionieren wird…

3

Hallo Lilly!

Vielen Dank für deine Antwort. Ich habe die Anweisungen in diesem Beitrag befolgt und habe immer noch das Problem mit dem unendlichen „Diskussion wird geladen…“.

1 „Gefällt mir“
4

Hast du es jemals herausgefunden?

5

Ich habe dieses Problem auch mit Next.js. Es bleibt beim ersten Laden auf ‘Diskussion wird geladen’ (bevor das Thema erstellt wurde). Wenn ich aktualisiere, werden die Kommentare/Diskussion starten angezeigt - es erstellt das Thema also einwandfrei für mich, aber aktualisiert den Ladestatus nicht (man muss aktualisieren, um den aktualisierten Status mit dem Kommentarfeld anzuzeigen).

Es wäre gut, wenn es einen Callback oder etwas Ähnliches gäbe, um mitzuteilen, dass das Thema erstellt wurde, da es nicht ideal ist, die Seite neu laden zu müssen. Ich weiß nicht, ob das mit einem iFrame möglich ist.

6

Hmm, es lädt tatsächlich nie, selbst nachdem das Thema erstellt wurde… Zumindest nicht bei mir.

Irgendwelche Tipps?

7

Hier ist, was ich in meiner nächsten App habe. Sie funktioniert, wie ich es zuvor erwähnt habe – man muss auf Aktualisieren drücken. Lassen Sie mich wissen, ob es funktioniert.

Manchmal muss ich mehrmals aktualisieren oder eine Weile warten und dann aktualisieren, um die Meldung „Diskussion wird geladen“ zu umgehen.

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

Komponente:

"use client"

import { useEffect, useRef } from "react"

/**
 * Eine React-Komponente zum Einbetten von Discourse-Kommentaren auf einer Website
 *
 * @param {Object} props - Komponenten-Props
 * @param {string} props.discourseUrl - Die URL Ihrer Discourse-Instanz (einschließlich abschließendem Schrägstrich)
 * @param {string} [props.discourseEmbedUrl] - Die URL der aktuellen Seite (für die automatische Themen-Erstellung)
 * @param {number} [props.topicId] - ID eines vorhandenen Discourse-Themas (Alternative zu discourseEmbedUrl)
 * @param {string} [props.username] - Benutzername für die Themen-Erstellung
 * @param {string} [props.className] - CSS-Klassenname, der zum Einbettungs-Element hinzugefügt werden soll
 * @param {string} [props.referrerPolicy] - Referrer-Richtlinie für den iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Doppelte Initialisierung verhindern
    if (initialized.current) return
    initialized.current = true

    // Erforderliche Props validieren
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl ist erforderlich")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: Entweder discourseEmbedUrl oder topicId muss angegeben werden")
      return
    }

    // Die Discourse-Einbettung konfigurieren
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Das globale DiscourseEmbed-Objekt setzen
    window.DiscourseEmbed = config

    // Das Discourse-Einbettungs-Skript laden
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Aufräumen
    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} />}
    </>
  )
}