quasarframework/quasar · error

Render failed

Error message

Render failed

What it means

During `quasar dev` with SSR mode, the dev webserver's error middleware caught an exception thrown while rendering a page request. Quasar logs the failing request URL as 'Render failed' and then hands the error to renderSSRError to produce a fallback error page instead of crashing the dev server.

Source

Thrown at app-vite/lib/modes/ssr/ssr-devserver.js:392

        serverAssets: this.#pathMap.resolveServerAssetsFolder
      },
      publicPath,
      folders: {
        root: this.#pathMap.rootFolder,
        public: this.#pathMap.publicFolder,
        serverAssets: this.#pathMap.serverAssetsFolder
      },
      render: this.#appOptions.render
    }

    middlewareParams.app = await create(middlewareParams)

    const serveStatic = await serveStaticContent(middlewareParams)
    middlewareParams.serve = {
      static: serveStatic,
      devError: ({ err, req }) => {
        log()
        warn(req.url, 'Render failed')

        return renderSSRError({
          err:
            err instanceof Error
              ? err
              : new Error(String(err) || 'Unknown error'),
          req,
          rootFolder: this.#pathMap.rootFolder
        })
      }
    }

    /** @type {import('../../../types').SsrInjectDevMiddlewareFn} */
    const registerDevMiddleware = await injectDevMiddleware(middlewareParams)

    await registerDevMiddleware((req, res, next) => {
      if (this.clientServer === null) {
        next()

View on GitHub (pinned to 4841521b5f)

Solutions

1. Read the stack trace printed after this warning in the terminal to find the actual throwing code in your app.
2. Guard browser-only APIs (check process.env.CLIENT / import.meta.env.CLIENT or typeof window) before use in components that also render on the server.
3. Check src-ssr/middlewares/render.js and any custom SSR middleware for throwing code.
4. Restart `quasar dev` after editing src-ssr files if hot reload didn't pick up the change.

Example fix

// before
export default defineComponent({
  setup() {
    return { width: window.innerWidth } // throws during SSR render
  }
})
// after
import { useQuasar } from 'quasar'
export default defineComponent({
  setup() {
    const $q = useQuasar()
    return { width: $q.screen.width } // SSR-safe reactive width
  }
})

// In src-ssr middleware, validate the render pipeline before rendering:
if (typeof window !== 'undefined') {
  throw new Error('SSR middleware loaded in client context')
}

// Wrap custom SSR render middleware:
try {
  await render({ req, res })
} catch (err) {
  console.error('SSR render failed for', req.url, err)
  res.statusCode = 500
  res.end('Server error')
}

When it happens

Trigger: Any uncaught error inside the SSR render pipeline of a request during `quasar dev` in SSR mode: an exception in the app's SSR entry (src-ssr/server or the renderer), a throwing Vue component setup during server render, or an error thrown in SSR middleware. Emitted from the devError handler registered by #bootWebserver (called by #compileWebserver) in ssr-devserver.js.

Common situations: Accessing browser-only APIs (window/document) during SSR render; a component throwing on the server; a bad import in src-ssr middleware; database/API fetch failure inside ssrMiddlewareRender; recent code change breaking the server bundle.

Related errors

• Render failed
• ERROR_NETWORK_PORT_NOT_AVAIL
• Invalid SSR nonce. Expected a non-empty base64 or base64url
• The queued task for "${task.diffName}" failed
• Render error for the above SSG page:

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/682afb0d35cbda69. Report an issue: GitHub.