Resolved build failures-IV

Author: EsariUp

headapps/Sugcon2024/.storybook/main.ts

@@ -2,7 +2,11 @@ import type { StorybookConfig } from '@storybook/nextjs';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // If you DO have MDX stories, keep the MDX line; otherwise comment it out.
+  stories: [
+    // '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -16,18 +20,25 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  staticDirs: ['../public', '../public/images'],
-  webpackFinal: async (config) => {
-    // Ensure the existence of config.resolve and config.resolve.alias
-    config.resolve = config.resolve || {};
-    config.resolve.alias = config.resolve.alias || {};
+  // `public/images` is already inside `public`, so one entry is enough
+  staticDirs: ['../public'],
+
+  webpackFinal: async (cfg) => {
+    // Storybook's webpack config defaults to production mode, which causes
+    // minification and dead code elimination. This interferes with some of
+    // our conditional code that relies on process.env.NODE_ENV checks.
+    (cfg as any).cache = false; // cache: false
 
-    Object.assign(config.resolve.alias, {
+   
+    cfg.resolve = cfg.resolve || {};
+    cfg.resolve.alias = cfg.resolve.alias || {};
+    Object.assign(cfg.resolve.alias, {
       '@sass': path.resolve(__dirname, '../src/assets/sass'),
       '@fontawesome': path.join(__dirname, '../node_modules', 'font-awesome'),
     });
 
-    return config;
+    return cfg;
   },
 };
+
 export default config;

headapps/Sugcon2024/src/components/CdpPageView.tsx

@@ -4,7 +4,7 @@ import {
   SiteInfo,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import config from 'temp/config';
 import { init } from '@sitecore/engage';
 import { siteResolver } from 'lib/site-resolver';
@@ -27,30 +27,26 @@ const CdpPageView = (): JSX.Element => {
   /**
    * Creates a page view event using the Sitecore Engage SDK.
    */
-  const createPageView = async (
-    page: string,
-    language: string,
-    site: SiteInfo,
-    pageVariantId: string
-  ) => {
-    const pointOfSale = resolvePointOfSale(site, language);
-    const engage = await init({
-      clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
-      targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',
-      // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
-      cookieDomain: window.location.hostname.replace(/^www\./, ''),
-      // Cookie may be created in personalize middleware (server), but if not we should create it here
-      forceServerCookieMode: false,
-    });
-    engage.pageView({
-      channel: 'WEB',
-      currency: 'USD',
-      pointOfSale,
-      page,
-      pageVariantId,
-      language,
-    });
-  };
+  const createPageView = useCallback(
+    async (page: string, language: string, site: SiteInfo, pageVariantId: string) => {
+      const pointOfSale = resolvePointOfSale(site, language);
+      const engage = await init({
+        clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
+        targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',
+        cookieDomain: window.location.hostname.replace(/^www\./, ''),
+        forceServerCookieMode: false,
+      });
+      engage.pageView({
+        channel: 'WEB',
+        currency: 'USD',
+        pointOfSale,
+        page,
+        pageVariantId,
+        language,
+      });
+    },
+    [] // Empty dependency array, so it will only be created once.
+  );
 
   /**
    * Determines if the page view events should be turned off.
@@ -87,7 +83,7 @@ const CdpPageView = (): JSX.Element => {
       scope
     );
     createPageView(route.name, language, siteInfo, pageVariantId);
-  }, [pageState, route, variantId, site]);
+  }, [pageState, route, variantId, site, createPageView]);
 
   return <></>;
 };

headapps/Sugcon2024/src/pages/[[...path]].tsx

@@ -3,7 +3,6 @@ import { GetStaticPaths, GetStaticProps } from 'next';
 import NotFound from 'src/NotFound';
 import Layout from 'src/Layout';
 import {
-  RenderingType,
   SitecoreContext,
   ComponentPropsContext,
   StaticPath,

headapps/Sugcon2024/src/stories/components/Basic Components/Navigation.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Default as Navigation } from 'components/Navigation';
-import { SitecoreContext } from '@sitecore-jss/sitecore-jss-react';
+import { SitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 
 const meta = {
   title: 'Basic Components/Navigation',