Site embutido preso em "Carregando Discussões"

Suporte
1

Olá! Tenho este problema ao tentar incorporar o Discourse em nosso aplicativo Web NextJS. Já tentei procurar respostas nos tópicos existentes que abordam o mesmo erro, mas não consegui encontrar uma resolução para o meu problema.

Veja como está o nosso código de incorporação:

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

No front-end, ele fica preso em “Carregando Discussões…”. Inicialmente, pensei que tivesse algo a ver com o CSP, mas já adicionei o domínio à Lista de Permissões de Incorporação. Nenhum erro aparece nos logs do console nem nas chamadas de rede.

Estou preso nisso há algumas horas, então qualquer ajuda seria apreciada.

1 curtida
2

Olá @Edrian_C_Bertulfo, seja bem-vindo :wave:

Você seguiu este tópico? É assim que se faz, mas não tenho ideia se funcionará para um aplicativo web NexJS…

3

Olá Lilly!

Obrigado pela sua resposta. Segui as instruções daquele post e ainda estou preso com o problema infinito de "Carregando Discussão…".

1 curtida
4

Você chegou a descobrir?

5

Eu também tenho esse problema usando o next.js. Ele fica travado em ‘loading discussion’ na primeira carga (antes do tópico ser criado). Se eu atualizo, os comentários/iniciar discussão aparecem - então ele cria o tópico corretamente para mim, mas não atualiza o estado de carregamento (tenho que atualizar para mostrar o estado atualizado com a caixa de comentários).

Seria bom se houvesse um callback ou algo para avisar que o tópico foi criado, pois não é ideal ter que atualizar a página. Não sei se isso é possível com um iframe.

6

Hmm, na verdade nunca carrega, mesmo após a criação dos tópicos…
Pelo menos não para mim.

Alguma dica?

7

Aqui está o que tenho no meu próximo aplicativo. Funciona como mencionei anteriormente - tenho que pressionar atualizar. Me avise se funciona.

Às vezes, preciso atualizar algumas vezes ou esperar um pouco e depois atualizar para passar da mensagem ‘carregando discussão’

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

componente:

"use client"

import { useEffect, useRef } from "react"

/**
 * Um componente React para incorporar comentários do Discourse em um site
 *
 * @param {Object} props - Propriedades do componente
 * @param {string} props.discourseUrl - A URL da sua instância do Discourse (incluindo barra final)
 * @param {string} [props.discourseEmbedUrl] - A URL da página atual (para criação automática de tópicos)
 * @param {number} [props.topicId] - ID de um tópico existente do Discourse (alternativa a discourseEmbedUrl)
 * @param {string} [props.username] - Nome de usuário para criação de tópicos
 * @param {string} [props.className] - Nome da classe CSS a ser adicionada ao embed
 * @param {string} [props.referrerPolicy] - Política de referência para o iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Previne inicialização duplicada
    if (initialized.current) return
    initialized.current = true

    // Valida as props necessárias
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl é obrigatório")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: É necessário fornecer discourseEmbedUrl ou topicId")
      return
    }

    // Configura o embed do Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Define o objeto global DiscourseEmbed
    window.DiscourseEmbed = config

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

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