Встроенный сайт завис на "Загрузка обсуждений"

Поддержка
1

Привет! У меня возникла проблема при попытке внедрить Discourse в наше веб-приложение на NextJS. Я уже искал решения в существующих темах, где обсуждается аналогичная ошибка, но так и не смог найти способ её исправить.

Вот как выглядит наш код для внедрения:

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

На фронтенде процесс завис на сообщении «Загрузка обсуждений…». Сначала я подумал, что дело в CSP, но я уже добавил домен в белый список для встраивания. В логах консоли и сетевых запросах ошибок не наблюдается.

Я уже несколько часов застрял на этом этапе, поэтому буду очень признателен за любую помощь.

2

Привет @Edrian_C_Bertulfo, добро пожаловать :wave:

Вы подписались на эту тему? Вот как это сделать, но я не знаю, сработает ли это для веб-приложения на основе NexJS…

3

Привет, Лилли!

Спасибо за ответ. Я следовал инструкциям в том посте, но всё ещё застрял на бесконечном «Загрузка обсуждения…».

4

Вы когда-нибудь разобрались?

5

У меня тоже возникает эта проблема с Next.js. При первой загрузке (до создания темы) он застревает в состоянии «загрузка обсуждения». Если обновить страницу, появляются комментарии/кнопка «начать обсуждение» — то есть тема создаётся нормально, но состояние загрузки не обновляется (нужно обновлять страницу, чтобы увидеть обновлённое состояние с полем для комментария).Было бы здорово, если бы существовал какой-то обратный вызов или аналогичный механизм, уведомляющий о том, что тема создана, так как необходимость обновлять страницу не является идеальным решением. Не знаю, возможно ли это в случае использования iframe.

6

Хм, он на самом деле никогда не загружается, даже после создания темы…
По крайней мере, у меня.

Есть какие-нибудь советы?

7

Вот что у меня есть в следующем приложении. Оно работает так, как я упоминал ранее — нужно нажать «Обновить». Дайте знать, если всё сработает.

Иногда мне приходится обновлять страницу несколько раз или подождать некоторое время перед обновлением, чтобы пройти мимо сообщения «Загрузка обсуждения».

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

компонент:

"use client"

import { useEffect, useRef } from "react"

/**
 * Компонент React для встраивания комментариев Discourse на веб-сайт
 *
 * @param {Object} props - Пропсы компонента
 * @param {string} props.discourseUrl - URL вашего экземпляра Discourse (включая завершающий слэш)
 * @param {string} [props.discourseEmbedUrl] - URL текущей страницы (для автоматического создания темы)
 * @param {number} [props.topicId] - ID существующей темы Discourse (альтернатива discourseEmbedUrl)
 * @param {string} [props.username] - Имя пользователя для создания темы
 * @param {string} [props.className] - Имя CSS-класса для добавления к элементу встраивания
 * @param {string} [props.referrerPolicy] - Политика отправителя для iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Предотвращение повторной инициализации
    if (initialized.current) return
    initialized.current = true

    // Проверка обязательных пропсов
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl обязателен")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: должен быть указан либо discourseEmbedUrl, либо topicId")
      return
    }

    // Настройка встраивания Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Установка глобального объекта DiscourseEmbed
    window.DiscourseEmbed = config

    // Загрузка скрипта встраивания Discourse
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Очистка
    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} />}
    </>
  )
}