Resolved build failures with layout service

EsariUp · EsariUp · commit 8e486ecc5991 · 2025-09-17T17:09:08.000+05:30
diff --git a/headapps/Sugcon2024/src/lib/dictionary-service-factory.ts b/headapps/Sugcon2024/src/lib/dictionary-service-factory.ts
@@ -1,11 +1,6 @@
-import {
-  DictionaryService,
-  RestDictionaryService,
-  GraphQLDictionaryService,
-  constants,
-} from '@sitecore-jss/sitecore-jss-nextjs';
-import config from 'temp/config';
+import { DictionaryService, GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
 import clientFactory from 'lib/graphql-client-factory';
+
 /**
  * Factory responsible for creating a DictionaryService instance
  */
@@ -15,34 +10,19 @@ export class DictionaryServiceFactory {
    * @returns {DictionaryService} service instance
    */
   create(siteName: string): DictionaryService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLDictionaryService({
-          clientFactory,
-          siteName,
-          /*
-            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current app. 
-            When not provided, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-            For SXA site(s) and multisite setup there's no need to specify it - it will be autoresolved.
-            Otherwise, if your Sitecore instance only has 1 JSS App (i.e. in a Sitecore XP setup), you can specify the root item ID here.
-            rootItemId: '{GUID}'
-          */
-          /*
-            GraphQL endpoint may reach its rate limit with the amount of Layout and Dictionary requests it receives and throw a rate limit error.
-            GraphQL Dictionary and Layout Services can handle rate limit errors from server and attempt a retry on requests.
-            For this, specify the number of retries the GraphQL client will attempt. 
-            It will only try the request once by default.
-            retries: 'number' 
-          */
-          retries:
-            (process.env.GRAPH_QL_SERVICE_RETRIES &&
-              parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) ||
-            0,
-        })
-      : new RestDictionaryService({
-          apiHost: config.sitecoreApiHost,
-          apiKey: config.sitecoreApiKey,
-          siteName,
-        });
+    return new GraphQLDictionaryService({
+      siteName,
+      clientFactory,
+      /*
+        GraphQL endpoint may reach its rate limit with the amount of requests it receives and throw a rate limit error.
+        GraphQL Dictionary and Layout Services can handle rate limit errors from server and attempt a retry on requests.
+        For this, specify the number of 'retries' the GraphQL client will attempt.
+        By default it is set to 3. You can disable it by configuring it to 0 for this service.
+      */
+      retries: (process.env.GRAPH_QL_SERVICE_RETRIES &&
+        parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number,
+      useSiteQuery: true,
+    });
   }
 }
 
diff --git a/headapps/Sugcon2024/src/lib/layout-service-factory.ts b/headapps/Sugcon2024/src/lib/layout-service-factory.ts
@@ -1,10 +1,7 @@
 import {
   LayoutService,
-  RestLayoutService,
-  GraphQLLayoutService,
-  constants,
+  GraphQLLayoutService
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import config from 'temp/config';
 import clientFactory from 'lib/graphql-client-factory';
 
 /**
@@ -16,28 +13,12 @@ export class LayoutServiceFactory {
    * @returns {LayoutService} service instance
    */
   create(siteName: string): LayoutService {
-    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
-      ? new GraphQLLayoutService({
-          clientFactory,
-          siteName,
-          /*
-            GraphQL endpoint may reach its rate limit with the amount of Layout and Dictionary requests it receives and throw a rate limit error.
-            GraphQL Dictionary and Layout Services can handle rate limit errors from server and attempt a retry on requests.
-            For this, specify the number of retries the GraphQL client will attempt. 
-            It will only try the request once by default.
-            retries: 'number' 
-          */
-          retries:
-            (process.env.GRAPH_QL_SERVICE_RETRIES &&
-              parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) ||
-            0,
-        })
-      : new RestLayoutService({
-          apiHost: config.sitecoreApiHost,
-          apiKey: config.sitecoreApiKey,
-          siteName,
-          configurationName: config.layoutServiceConfigurationName,
-        });
+    return new GraphQLLayoutService({
+ siteName, 
+  clientFactory, 
+   retries: (process.env.GRAPH_QL_SERVICE_RETRIES && 
+     parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number, 
+ });
   }
 }
 
diff --git a/headapps/Sugcon2024/src/lib/middleware/plugins/personalize.ts b/headapps/Sugcon2024/src/lib/middleware/plugins/personalize.ts
@@ -1,17 +1,18 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { PersonalizeMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware';
 import { MiddlewarePlugin } from '..';
+import clientFactory from 'lib/graphql-client-factory';
 import config from 'temp/config';
 import { siteResolver } from 'lib/site-resolver';
-import { createGraphQLClientFactory } from 'lib/graphql-client-factory/create';
+
 /**
  * This is the personalize middleware plugin for Next.js.
- * It is used to enable Sitecore personalization of pages in Next.js.
+ * It is used to enable Sitecore personalization and A/B testing of pages in Next.js.
  *
  * The `PersonalizeMiddleware` will
- *  1. Make a call to the Sitecore Experience Edge to get the personalization information about the page.
- *  2. Based on the response, make a call to the Sitecore CDP (with request/user context) to determine the page variant.
- *  3. Rewrite the response to the specific page variant.
+ *  1. Call Sitecore Experience Edge to get the personalization information about the page.
+ *  2. Based on the response, call Sitecore Personalize (with request/user context) to determine the page / component variant(s).
+ *  3. Rewrite the response to the specific page / component variant(s).
  */
 class PersonalizePlugin implements MiddlewarePlugin {
   private personalizeMiddleware: PersonalizeMiddleware;
@@ -23,31 +24,23 @@ class PersonalizePlugin implements MiddlewarePlugin {
     this.personalizeMiddleware = new PersonalizeMiddleware({
       // Configuration for your Sitecore Experience Edge endpoint
       edgeConfig: {
-        clientFactory: createGraphQLClientFactory(config),
-        scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
+        clientFactory,
         timeout:
           (process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT)) ||
           400,
       },
       // Configuration for your Sitecore CDP endpoint
       cdpConfig: {
-        sitecoreEdgeContextId: process.env.SITECORE_EDGE_CONTEXT_ID
-          ? process.env.SITECORE_EDGE_CONTEXT_ID
-          : (() => {
-              throw new Error(
-                'Environment variable SITECORE_EDGE_CONTEXT_ID is required but not set.'
-              );
-            })(),
-        sitecoreEdgeUrl:
-          process.env.NEXT_PUBLIC_CDP_EDGE_URL || 'https://edge-platform.sitecorecloud.io',
-        channel: process.env.NEXT_PUBLIC_CDP_CHANNEL || 'WEB',
-        currency: process.env.NEXT_PUBLIC_CDP_CURRENCY || 'USD',
+        sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
         timeout:
           (process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT)) ||
           400,
       },
+      // Optional Sitecore Personalize scope identifier.
+      scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
       // This function determines if the middleware should be turned off.
       // IMPORTANT: You should implement based on your cookie consent management solution of choice.
       // You may wish to keep it disabled while in development mode.
@@ -58,9 +51,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
       excludeRoute: () => false,
       // Site resolver implementation
       siteResolver,
-      // Personalize middleware will use PosResolver.resolve(site, language) (same as CdpPageView) by default to get point of sale.
-      // You can also pass a custom point of sale resolver into middleware to override it like so:
-      // getPointOfSale: (site, language) => { ... }
     });
   }
 
diff --git a/headapps/Sugcon2024/src/lib/next-config/plugins/cors-header.js b/headapps/Sugcon2024/src/lib/next-config/plugins/cors-header.js
@@ -9,12 +9,18 @@ const corsHeaderPlugin = (nextConfig = {}) => {
   }
   return Object.assign({}, nextConfig, {
     async headers() {
-      const extendHeaders = typeof nextConfig.headers === "function" ? await nextConfig.headers() : [];
+      const extendHeaders =
+        typeof nextConfig.headers === 'function' ? await nextConfig.headers() : [];
       return [
-        ...await extendHeaders,
+        ...(await extendHeaders),
         {
           source: '/_next/:path*',
-          headers: [{ key: 'Access-Control-Allow-Origin', value: config.sitecoreApiHost }],
+          headers: [
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: config.sitecoreApiHost.replace(/\/$/, ''),
+            },
+          ],
         },
       ];
     },
diff --git a/headapps/Sugcon2024/src/lib/page-props-factory/plugins/component-props.ts b/headapps/Sugcon2024/src/lib/page-props-factory/plugins/component-props.ts
@@ -7,7 +7,8 @@ import { Plugin, isServerSidePropsContext } from '..';
 class ComponentPropsPlugin implements Plugin {
   private componentPropsService: ComponentPropsService;
 
-  order = 2;
+  // Make sure to run this plugin last to ensure that the updated layout data is used
+  order = 10;
 
   constructor() {
     this.componentPropsService = new ComponentPropsService();
diff --git a/headapps/Sugcon2024/src/middleware.ts b/headapps/Sugcon2024/src/middleware.ts
@@ -14,7 +14,11 @@ export const config = {
    * 3. /sitecore/api (Sitecore API routes)
    * 4. /- (Sitecore media)
    * 5. /healthz (Health check)
-   * 6. all root files inside /public
+   * 6. /feaas-render (FEaaS render)
+   * 7. all root files inside /public
    */
-  matcher: ['/', '/((?!api/|_next/|healthz|sitecore/api/|-/|favicon.ico|sc_logo.svg).*)'],
+  matcher: [
+    '/',
+    '/((?!api/|_next/|feaas-render|healthz|sitecore/api/|-/|favicon.ico|sc_logo.svg).*)',
+  ],
 };
diff --git a/headapps/Sugcon2024/src/pages/[[...path]].tsx b/headapps/Sugcon2024/src/pages/[[...path]].tsx
@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import { JSX } from 'react';
+import { useEffect, JSX } from 'react';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import NotFound from 'src/NotFound';
 import Layout from 'src/Layout';
@@ -12,6 +11,7 @@ import { handleEditorFastRefresh } from '@sitecore-jss/sitecore-jss-nextjs/utils
 import { SitecorePageProps } from 'lib/page-props';
 import { sitecorePagePropsFactory } from 'lib/page-props-factory';
 import { componentBuilder } from 'temp/componentBuilder';
+import config from 'temp/config';
 import { sitemapFetcher } from 'lib/sitemap-fetcher';
 
 const SitecorePage = ({
@@ -37,11 +37,13 @@ const SitecorePage = ({
       <SitecoreContext
         componentFactory={componentBuilder.getComponentFactory({ isEditing })}
         layoutData={layoutData}
+        api={{
+          edge: {
+            contextId: config.sitecoreEdgeContextId,
+            edgeUrl: config.sitecoreEdgeUrl,
+          },
+        }}
       >
-        {/*
-          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
-          If you are using Experience Editor only, this logic can be removed, Layout can be left.
-        */}
         <Layout layoutData={layoutData} headLinks={headLinks} />
       </SitecoreContext>
     </ComponentPropsContext>
@@ -62,7 +64,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
   let paths: StaticPath[] = [];
   let fallback: boolean | 'blocking' = 'blocking';
 
-  if (process.env.NODE_ENV !== 'development' && !process.env.DISABLE_SSG_FETCH) {
+  if (
+    process.env.NODE_ENV !== 'development' &&
+    process.env.DISABLE_SSG_FETCH?.toLowerCase() !== 'true'
+  ) {
     try {
       // Note: Next.js runs export in production mode
       paths = await sitemapFetcher.fetch(context);
