diff --git a/src/server/plugins/engine/pageControllers/SummaryPageController.ts b/src/server/plugins/engine/pageControllers/SummaryPageController.ts
index 5fc6f5b72..f749a7a71 100644
--- a/src/server/plugins/engine/pageControllers/SummaryPageController.ts
+++ b/src/server/plugins/engine/pageControllers/SummaryPageController.ts
@@ -5,7 +5,7 @@ import {
   type SubmitPayload
 } from '@defra/forms-model'
 import Boom from '@hapi/boom'
-import { type RouteOptions } from '@hapi/hapi'
+import { type ResponseToolkit, type RouteOptions } from '@hapi/hapi'
 
 import { COMPONENT_STATE_ERROR } from '~/src/server/constants.js'
 import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'
@@ -162,6 +162,7 @@ export class SummaryPageController extends QuestionPageController {
           )
 
           request.yar.flash(COMPONENT_STATE_ERROR, govukError, true)
+          await request.yar.commit(h as ResponseToolkit)
 
           await cacheService.resetComponentStates(request, error.getStateKeys())
 
diff --git a/src/server/plugins/nunjucks/context.js b/src/server/plugins/nunjucks/context.js
index b063eecc5..e76c2eb21 100644
--- a/src/server/plugins/nunjucks/context.js
+++ b/src/server/plugins/nunjucks/context.js
@@ -47,10 +47,12 @@ export async function context(request) {
     consumerViewContext = await pluginStorage.viewContext(request)
   }
 
-  const flashedError = request.yar.flash(COMPONENT_STATE_ERROR)
-  const flashedErrors = !Array.isArray(flashedError)
-    ? [flashedError]
-    : undefined
+  const flashResult = /** @type {unknown} */ (
+    request.yar.flash(COMPONENT_STATE_ERROR)
+  )
+  const flashedErrors = /** @type {object[]} */ (
+    Array.isArray(flashResult) ? flashResult : [flashResult].filter(Boolean)
+  )
 
   /** @type {ViewContext} */
   const ctx = {
@@ -62,19 +64,9 @@ export async function context(request) {
     previewMode: isPreviewMode ? formState : undefined,
     slug: isResponseOK ? params?.slug : undefined,
     // @ts-expect-error TODO fix and merge into 'errors' to link back to the form component
-    flashedErrors
+    flashedErrors: flashedErrors.length ? flashedErrors : undefined
   }
 
-  // TODO remove this temporary hack
-  await request.yar.commit(
-    /** @type {import('@hapi/hapi').ResponseToolkit} */ (
-      /** @type {unknown} */ ({
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        state: () => {}
-      })
-    )
-  )
-
   return ctx
 }
 
diff --git a/test/form/component-state-errors.test.js b/test/form/component-state-errors.test.js
index d80c1dbec..593830410 100644
--- a/test/form/component-state-errors.test.js
+++ b/test/form/component-state-errors.test.js
@@ -410,6 +410,9 @@ describe('Component State Error Tests - File Upload', () => {
     expect(submitRes.statusCode).toBe(StatusCodes.SEE_OTHER)
     expect(submitRes.headers.location).toBe(`${basePath}/file-upload-component`)
 
+    // Get updated session cookie after the flash was committed
+    const updatedHeaders = getCookieHeader(submitRes, 'session')
+
     // Now GET the file upload page and verify the error message is displayed
     jest.mocked(uploadService.initiateUpload).mockResolvedValueOnce({
       uploadId: '123-546-791',
@@ -419,7 +422,7 @@ describe('Component State Error Tests - File Upload', () => {
 
     const pageRes = await server.inject({
       url: `${basePath}/file-upload-component`,
-      headers
+      headers: updatedHeaders
     })
 
     expect(pageRes.statusCode).toBe(StatusCodes.OK)