Errors in developer console on frontend

[tobiasgraeber]

Description

Screenshots

No response

Additional information

No response

[bjarneo]

Thank you. Do you have any more information about this issue?

[tobiasgraeber]

No, i just recognized it on the main page / every page. It seems as if it could be a issue resulting from the warnings before, especially tiptap. Potential fix could be (untested / just a quick auto-check guess):

Issue: React 18 hydration error with TipTap and concurrent rendering

Symptoms

• Console warnings/errors:
  • No 'hydrateFallback' element provided to render during initial hydration
  • [tiptap warn]: Duplicate extension names found: ['link']
  • Uncaught Error: There was an error during concurrent rendering but React was able to recover by synchronously rendering the entire root

Root Causes (Typical)

1. Hydration mismatch in React 18

   • Server-rendered HTML does not match client render.
   • Often caused by non-SSR-safe components (e.g. TipTap editor) rendering during SSR/hydration.

2. Suspense without fallback

   • Suspense boundary used during SSR/streaming without a fallback, causing hydration to fail when a component suspends.

3. Duplicate TipTap extensions

   • Link extension registered more than once (commonly via StarterKit + explicit Link import), leading to inconsistent editor state between server and client.

Fix / Action Items

• Make TipTap client-only

  • Next.js:

    dynamic(() => import('./Editor'), { ssr: false })

    or mark editor component with:

    'use client'

• Remove duplicate TipTap extensions

  • Do not register Link twice:

    StarterKit.configure({ link: false }),
    Link,

    or rely on StarterKit only.

• Ensure all Suspense boundaries have fallbacks

  <Suspense fallback={<Loading />}>
    <Component />
  </Suspense>