#🆘 500 SSR Error on Homepage (Cloudflare Pages)

4 messages · Page 1 of 1 (latest)

humble forum
#

Hey everyone 👋

I’m getting a 500 SSR error in production and can’t figure out why.

🐛 The issue

Error: 500 - Cannot read properties of undefined (reading 'console')

Occurs: Only on direct access to / or when refreshing the page

Works fine: When navigating from /login → /

I'm redirecting from login -> home fine, but refreshing breaks

Environment: Nuxt 4.1.2 on Cloudflare Pages (preset: cloudflare-pages)

🔍 Reproduction

You can check it here:
🔗 Repo: https://github.com/ElvinKyungu/linear-nuxt-fullstack/tree/develop
🌐 Preview: https://f7864481.linear-nuxt-fullstack.pages.dev/

❓ Questions

Should useToast() from @nuxt/ui work in SSR?

Is there a better pattern for handling toasts inside stores used in SSR?

Could a global middleware cause SSR store initialization issues?

Thanks a lot for your help! 🙏

GitHub
GitHub - ElvinKyungu/linear-nuxt-fullstack at develop

A sleek and efficient project management interface inspired by Linear. Built with Nuxt.js, GSAP, Tailwindcss and and Nuxt UI, it enables seamless issue tracking, project management, and team collab...

real valleyBOT
#

Hi @humble forum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information in the knowledge sources, here are answers to your questions:

1. Should useToast() from @nuxt/ui work in SSR?

The knowledge sources do not explicitly mention useToast() from @nuxt/ui or its SSR compatibility. However, a common issue in SSR is using browser-only APIs or composables that depend on the client environment during server-side rendering. If useToast() relies on browser APIs (like window or document), calling it during SSR will cause errors such as "Cannot read properties of undefined" because those APIs are not available on the server. The best practice is to only use such composables inside client-only code, for example, within onMounted or wrapped in a <ClientOnly> component, to avoid SSR errors Common reasons for SSR errors.

2. Is there a better pattern for handling toasts inside stores used in SSR?

You should avoid triggering UI side effects (like toasts) directly inside stores or code that runs during SSR. Instead, trigger toasts in the client context, such as inside components after the store action completes, and only on the client side (e.g., inside onMounted or after checking process.client or import.meta.client). This prevents SSR from trying to access browser-only APIs and avoids hydration mismatches Best practices for SSR and client-only code.

3. Could a global middleware cause SSR store initialization issues?

#

Yes, global middleware can run during SSR and may trigger store actions or composables. If your middleware (or anything it calls) uses browser-only APIs or composables that are not SSR-safe, it can cause SSR errors. Always ensure that any code running in middleware is SSR-compatible and does not access browser-only features unless you guard it with a client-only check SSR lifecycle and middleware.

Additional Notes

  • The error message "Cannot read properties of undefined (reading 'console')" suggests that some code is trying to access console on an undefined object, possibly due to a browser-only API being accessed during SSR.
  • Review your usage of useToast() and any other UI composables in middleware, stores, or code that runs during SSR. Move such calls to client-only contexts.
  • For debugging SSR errors, you can customize error handling and use Nuxt's error hooks to get more information Error handling in Nuxt 4.

If you need to report a bug, ensure you provide a minimal reproduction and specify if the issue only occurs in SSR or with certain middleware Reporting bugs.

If you need more specific guidance, please provide a code snippet of where useToast() is being called.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: