Sitio incrustado atascado en "Cargando discusiones"

Soporte
1

Hola! Tengo este problema al intentar incrustar Discourse en nuestra aplicación web NextJS. Ya intenté buscar respuestas en los hilos existentes que abordan el mismo error, pero no he podido encontrar una solución para mi problema.

Así es como se ve nuestro código de incrustación:

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

En el front-end, simplemente se queda atascado en “Cargando debates…”. Al principio pensé que tenía que ver con la CSP, pero ya agregué el dominio a la lista de permitidos de incrustación. No aparecen errores en los registros de la consola ni en las llamadas de red.

He estado atascado en esto durante unas horas, así que agradecería cualquier ayuda.

1 me gusta
2

Hola @Edrian_C_Bertulfo, bienvenido :wave:

¿Seguiste este tema? Así es como se hace, pero no tengo idea de si funcionará para una aplicación web NexJS…

3

¡Hola Lilly!

Gracias por tu respuesta. Seguí las instrucciones de esa publicación y todavía estoy atascado con el problema infinito de “Cargando discusión…”.

1 me gusta
4

¿Lo averiguaste alguna vez?

5

También tengo este problema con next.js. Se queda en ‘loading discussion’ en la primera carga (antes de que se cree el tema). Si actualizo, los comentarios/iniciar discusión se muestran; por lo tanto, crea el tema correctamente para mí, pero no actualiza el estado de carga (tengo que actualizar para mostrar el estado actualizado con el cuadro de comentarios).

Sería bueno si hubiera una devolución de llamada o algo que te hiciera saber que el tema se ha creado, ya que no es ideal tener que actualizar la página. No sé si eso es posible con un iframe.

6

Hmm, en realidad nunca carga, incluso después de que se crean los temas…
Al menos no para mí.

¿Algún consejo?

7

Aquí está lo que tengo en mi próxima aplicación. Funciona como mencioné anteriormente: tengo que presionar actualizar. Hazme saber si funciona.

A veces tengo que actualizar varias veces o esperar un rato y luego actualizar para superar el mensaje “cargando discusión”.

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

componente:

"use client"

import { useEffect, useRef } from "react"

/**
 * Un componente React para incrustar comentarios de Discourse en un sitio web
 *
 * @param {Object} props - Propiedades del componente
 * @param {string} props.discourseUrl - La URL de tu instancia de Discourse (incluyendo la barra final)
 * @param {string} [props.discourseEmbedUrl] - La URL de la página actual (para la creación automática de temas)
 * @param {number} [props.topicId] - ID de un tema existente de Discourse (alternativa a discourseEmbedUrl)
 * @param {string} [props.username] - Nombre de usuario para la creación de temas
 * @param {string} [props.className] - Nombre de clase CSS para añadir al embed
 * @param {string} [props.referrerPolicy] - Política de referente para el iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Evitar inicialización duplicada
    if (initialized.current) return
    initialized.current = true

    // Validar props requeridas
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl es requerido")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: Se debe proporcionar discourseEmbedUrl o topicId")
      return
    }

    // Configurar el embed de Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Establecer el objeto global DiscourseEmbed
    window.DiscourseEmbed = config

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

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