resolve journey data from middleware (#58330)

src/journeys/middleware/journey-track.ts

@@ -1,6 +1,5 @@
 import type { Response, NextFunction } from 'express'
 import type { ExtendedRequest, Context } from '@/types'
-import { resolveJourneyContext } from '../lib/journey-path-resolver'
 
 export default async function journeyTrack(
   req: ExtendedRequest & { context: Context },
@@ -10,8 +9,30 @@ export default async function journeyTrack(
   if (!req.context) throw new Error('request is not contextualized')
   if (!req.context.page) return next()
 
+  // Only run journey resolution if the page has journey tracks defined
+  if (!(req.context.page as any).journeyTracks) {
+    req.context.currentJourneyTrack = null
+    return next()
+  }
+
   try {
-    const journeyContext = await resolveJourneyContext(
+    // Import and use the journey resolver which uses renderContent, need the
+    // async import since it uses fs Node apis
+    const journeyResolver = await import('../lib/journey-path-resolver')
+
+    // resolve the journey tracks which renders the journey content like the
+    // description to handle liquid rendering
+    const resolvedTracks = await journeyResolver.resolveJourneyTracks(
+      (req.context.page as any).journeyTracks,
+      req.context,
+    )
+
+    // Store resolved tracks on the page context for later use in getServerSideProps
+    ;(req.context.page as any).resolvedJourneyTracks = resolvedTracks
+
+    // resolve the current journey context since we're on a journey track page
+    // i.e. next/prev articles in the track, this article's position in the track
+    const journeyContext = await journeyResolver.resolveJourneyContext(
       req.pagePath || '',
       req.context.pages || {},
       req.context,

src/landings/context/LandingContext.tsx

@@ -60,12 +60,9 @@ export const getLandingContextFromRequest = async (
     }
   }
 
-  let journeyTracks: JourneyTrack[] = []
-  if (landingType === 'journey' && page.journeyTracks) {
-    // Need a dynamic import because journey-path-resolver uses Node fs apis
-    const { resolveJourneyTracks } = await import('@/journeys/lib/journey-path-resolver')
-    journeyTracks = await resolveJourneyTracks(page.journeyTracks, req.context)
-  }
+  // Note: Journey tracks are resolved in middleware and added to the request
+  // context to avoid the error using server side apis client side
+  const journeyTracks: JourneyTrack[] = []
 
   return {
     landingType,

src/landings/pages/product.tsx

@@ -178,6 +178,13 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     additionalUINamespaces.push('product_landing')
   } else if (currentLayoutName === 'journey-landing' || req.query?.feature === 'journey-landing') {
     props.journeyContext = await getLandingContextFromRequest(req, 'journey')
+
+    // journey tracks are resolved in middleware and added to the request
+    // so we need to add them to the journey context here
+    if ((req.context.page as any).resolvedJourneyTracks) {
+      props.journeyContext.journeyTracks = (req.context.page as any).resolvedJourneyTracks
+    }
+
     additionalUINamespaces.push('journey_landing', 'product_landing')
   } else if (
     currentLayoutName === 'discovery-landing' ||

tsconfig.json

@@ -16,7 +16,7 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "noEmit": true,
     "allowSyntheticDefaultImports": true,
@@ -41,6 +41,7 @@
     "**/*.ts",
     "**/*.tsx",
     "*.d.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ]
 }