Sito incorporato bloccato su "Caricamento discussioni"

Supporto
1

Ciao! Ho questo problema quando provo a incorporare Discourse nella nostra Web App NextJS. Ho già provato a cercare risposte nei thread esistenti che toccano lo stesso errore, ma non sono riuscito a trovare una soluzione per il mio problema.

Ecco come appare il nostro codice di incorporamento:

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

Nel front-end, rimane bloccato su “Loading Discussions…”. All’inizio ho pensato che avesse a che fare con la CSP, ma ho già aggiunto il dominio alla Whitelist di incorporamento. Non vengono visualizzati errori nei log della console né nelle chiamate di rete.

Sono bloccato su questo da qualche ora, quindi apprezzerei qualsiasi aiuto.

1 Mi Piace
2

Ciao @Edrian_C_Bertulfo benvenuto :wave:

Hai seguito questo argomento? Questo è come fare, ma non ho idea se funzionerà per un’app web NexJS…

3

Ciao Lilly!

Grazie per la tua risposta. Ho seguito le istruzioni in quel post e sono ancora bloccato con il problema infinito di “Caricamento discussione…”.

1 Mi Piace
4

Hai mai capito?

5

Ho anche questo problema con next.js. Si blocca su ‘loading discussion’ al primo caricamento (prima che l’argomento venga creato). Se aggiorno, i commenti/avvia discussione vengono visualizzati - quindi crea l’argomento correttamente per me, ma non aggiorna lo stato di caricamento (devo aggiornare per mostrare lo stato aggiornato con la casella di commento).

Sarebbe utile se ci fosse una callback o qualcosa del genere per farti sapere che l’argomento è stato creato, poiché non è l’ideale dover aggiornare la pagina. Non so se sia possibile con un iframe.

6

Hmm, in realtà non viene mai caricato, nemmeno dopo la creazione dell’argomento…
Almeno non per me.

Qualche consiglio?

7

Ecco cosa ho nella mia prossima app. Funziona come ho detto in precedenza: devi premere refresh. Fammi sapere se funziona.

A volte devo premere refresh alcune volte o aspettare un po’ e poi premere refresh per superare il messaggio “caricamento discussione”

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

componente:

"use client"

import { useEffect, useRef } from "react"

/**
 * Un componente React per incorporare i commenti di Discourse su un sito web
 *
 * @param {Object} props - Proprietà del componente
 * @param {string} props.discourseUrl - L'URL della tua istanza Discourse (inclusa la barra finale)
 * @param {string} [props.discourseEmbedUrl] - L'URL della pagina corrente (per la creazione automatica di argomenti)
 * @param {number} [props.topicId] - ID di un argomento Discourse esistente (alternativa a discourseEmbedUrl)
 * @param {string} [props.username] - Nome utente per la creazione di argomenti
 * @param {string} [props.className] - Nome della classe CSS da aggiungere all'embed
 * @param {string} [props.referrerPolicy] - Politica referrer per l'iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Previene inizializzazioni duplicate
    if (initialized.current) return
    initialized.current = true

    // Valida le proprietà richieste
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl è obbligatorio")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: è necessario fornire discourseEmbedUrl o topicId")
      return
    }

    // Configura l'embed di Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Imposta l'oggetto globale DiscourseEmbed
    window.DiscourseEmbed = config

    // Carica lo script di embed di Discourse
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Pulizia
    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} />}
    </>
  )
}