[Nextjs]Upgrade 3rd party dependencies

packages/create-sitecore-jss/src/templates/nextjs-personalize/package.json

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@sitecore/engage": "^0.3.2"
+    "@sitecore/engage": "^0.4.0"
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-styleguide-tracking/src/Navigation.tsx

@@ -11,14 +11,14 @@ const Navigation = (): JSX.Element => {
 
   return (
     <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
-      <h5 className="my-0 mr-md-auto font-weight-normal">
+      <h5 className="my-0 me-md-auto fw-normal">
         <Link href="/">
           <a className="text-dark">
             <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
           </a>
         </Link>
       </h5>
-      <nav className="my-2 my-md-0 mr-md-3">
+      <nav className="my-2 my-md-0 me-md-3">
         <a
           className="p-2 text-dark"
           href="https://jss.sitecore.com"

packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/styleguide/en.yml

@@ -99,7 +99,7 @@ placeholders:
                       href: https://dev.sitecore.net
                       text: Sitecore Dev Site
                       target: _blank
-                      class: font-weight-bold
+                      class: fw-bold
                       title: <a> title attribute
                 - componentName: Styleguide-FieldUsage-ItemLink
                   fields:

packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^5.2.3",
     "nprogress": "~0.2.0"
   },
   "devDependencies": {

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/Navigation.tsx

@@ -11,14 +11,14 @@ const Navigation = (): JSX.Element => {
 
   return (
     <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
-      <h5 className="my-0 mr-md-auto font-weight-normal">
+      <h5 className="my-0 me-md-auto fw-normal">
         <Link href="/">
           <a className="text-dark">
             <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
           </a>
         </Link>
       </h5>
-      <nav className="my-2 my-md-0 mr-md-3">
+      <nav className="my-2 my-md-0 me-md-3">
         <a
           className="p-2 text-dark"
           href="https://jss.sitecore.com"

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Link.tsx

@@ -37,7 +37,7 @@ const StyleguideFieldUsageLink = (props: StyleguideFieldUsageLinkProps): JSX.Ele
     <Link
       field={props.fields.externalLink}
       showLinkTextWithChildrenPresent={true}
-      className="font-weight-bold"
+      className="fw-bold"
       data-otherattributes="pass-through-to-anchor-tag"
     />
   </StyleguideSpecimen>

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Text.tsx

@@ -26,7 +26,7 @@ const StyleguideFieldUsageText = (props: StyleguideFieldUsageTextProps): JSX.Ele
       tag="section"
       editable={false}
       encode={false}
-      className="font-weight-bold"
+      className="fw-bold"
       data-sample="other-attributes-pass-through"
     />
 

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -10,12 +10,12 @@ import {
   resetEditorChromes,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import NextLink from 'next/link';
+import { ConnectedDemoQueryDocument } from './GraphQL-ConnectedDemo.dynamic.graphql';
 import {
-  ConnectedDemoQueryDocument,
   <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
   Item,
   <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
-} from './GraphQL-ConnectedDemo.dynamic.graphql';
+} from 'graphql-types';
 import { ComponentProps } from 'lib/component-props';
 import config from 'temp/config';
 

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout.tsx

@@ -37,7 +37,7 @@ const StyleguideLayout = (props: ComponentProps): JSX.Element => {
     }))
     .map((section) => (
       <nav key={section.heading} className="nav flex-column pt-2">
-        <a href={`#${section.id}`} className="nav-item font-weight-bold">
+        <a href={`#${section.id}`} className="nav-item fw-bold">
           {section.heading}
         </a>
         {section.children && (

packages/create-sitecore-jss/src/templates/nextjs/.eslintrc

@@ -4,7 +4,7 @@
     "next",
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
+    "prettier",
     "plugin:yaml/recommended",
     "plugin:prettier/recommended"
   ],

packages/create-sitecore-jss/src/templates/nextjs/.graphql-let.yml

@@ -2,9 +2,7 @@ schema:
   - './src/temp/GraphQLIntrospectionResult.json'
 documents: 'src/**/*.graphql'
 plugins:
-  - typescript
   - typescript-operations
   - typed-document-node
-cacheDir: .generated
 config:
     useIndexSignature: true

packages/create-sitecore-jss/src/templates/nextjs/package.json

@@ -31,45 +31,45 @@
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "^21.1.0-canary",
     "graphql": "~15.8.0",
-    "graphql-tag": "^2.11.0",
-    "next": "^12.3.1",
+    "graphql-tag": "^2.12.6",
+    "next": "^12.3.4",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.19.1",
-    "@graphql-codegen/plugin-helpers": "^1.18.1",
-    "@graphql-codegen/typed-document-node": "^1.18.4",
-    "@graphql-codegen/typescript": "^1.21.1",
-    "@graphql-codegen/typescript-operations": "^1.17.9",
-    "@graphql-codegen/typescript-resolvers": "^1.17.10",
-    "@graphql-typed-document-node/core": "^3.1.0",
+    "@graphql-codegen/cli": "^1.21.8",
+    "@graphql-codegen/import-types-preset": "^2.2.6",
+    "@graphql-codegen/plugin-helpers": "^3.1.2",
+    "@graphql-codegen/typed-document-node": "^2.3.12",
+    "@graphql-codegen/typescript": "^2.8.7",
+    "@graphql-codegen/typescript-operations": "^2.5.12",
+    "@graphql-codegen/typescript-resolvers": "^2.7.12",
+    "@graphql-typed-document-node/core": "^3.1.1",
     "@sitecore-jss/sitecore-jss-cli": "^21.1.0-canary",
-    "@types/node": "^14.6.4",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.29.1",
-    "@typescript-eslint/parser": "^4.29.1",
-    "axios": "^0.21.1",
-    "chalk": "~2.4.2",
-    "chokidar": "~3.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "chalk": "~4.1.2",
+    "chokidar": "~3.5.3",
     "constant-case": "^3.0.4",
-    "cross-env": "~6.0.3",
-    "dotenv": "^16.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-next": "^11.0.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-yaml": "^0.2.0",
-    "graphql-let": "^0.16.2",
-    "next-transpile-modules": "^9.0.0",
+    "cross-env": "~7.0.3",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.32.0",
+    "eslint-config-next": "^13.1.5",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-yaml": "^0.5.0",
+    "graphql-let": "^0.18.6",
+    "next-transpile-modules": "^10.0.0",
     "npm-run-all": "~4.1.5",
-    "prettier": "^2.1.2",
-    "ts-node": "^9.0.0",
-    "tsconfig-paths": "^4.1.1",
-    "typescript": "~4.3.5",
-    "yaml-loader": "^0.6.0"
+    "prettier": "^2.8.3",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.1.2",
+    "typescript": "~4.9.4",
+    "yaml-loader": "^0.8.0"
   },
   "scripts": {
     "jss": "jss",

packages/create-sitecore-jss/src/templates/nextjs/src/assets/app.css

@@ -26,3 +26,11 @@ a[target='_blank']:after {
     font-weight: 300;
     line-height: 1.2;
 }
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}

packages/create-sitecore-jss/src/templates/nextjs/src/lib/data-fetcher.ts

@@ -1,5 +1,4 @@
-import { AxiosResponse } from 'axios';
-import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss-nextjs';
+import { AxiosDataFetcher, AxiosResponse } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * Implements a data fetcher using Axios - replace with your favorite

packages/create-sitecore-jss/src/templates/nextjs/tsconfig.json

@@ -5,7 +5,8 @@
       "components/*": ["src/components/*"],
       "lib/*": ["src/lib/*"],
       "temp/*": ["src/temp/*"],
-      "assets/*": ["src/assets/*"]
+      "assets/*": ["src/assets/*"],
+      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"]
     },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
@@ -27,7 +28,8 @@
     "noImplicitAny": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

packages/sitecore-jss-nextjs/package.json

@@ -30,50 +30,50 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@types/chai": "^4.2.2",
-    "@types/chai-as-promised": "^7.1.3",
+    "@types/chai": "^4.3.4",
+    "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
     "@types/enzyme": "^3.10.12",
-    "@types/mocha": "^9.0.0",
-    "@types/node": "17.0.40",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "~18.11.18",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.5",
-    "@types/sinon": "^7.5.0",
-    "@types/sinon-chai": "^3.2.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "chai": "^4.2.0",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/sinon": "^10.0.13",
+    "@types/sinon-chai": "^3.2.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-string": "^1.5.0",
     "chalk": "^4.1.2",
-    "cheerio": "1.0.0-rc.10",
+    "cheerio": "1.0.0-rc.12",
     "cross-fetch": "^3.1.5",
     "del-cli": "^5.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-react": "^7.21.5",
-    "jsdom": "^15.1.1",
-    "mocha": "^9.1.3",
-    "next": "^12.3.1",
-    "nock": "^13.0.5",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react": "^7.32.1",
+    "jsdom": "^21.1.0",
+    "mocha": "^10.2.0",
+    "next": "^12.3.4",
+    "nock": "^13.3.0",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^7.5.0",
+    "sinon": "^15.0.1",
     "sinon-chai": "^3.7.0",
-    "ts-node": "^9.0.0",
-    "typescript": "~4.3.5"
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "next": "^12.3.1",
+    "next": "^12.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "^21.1.0-canary.76",
     "@sitecore-jss/sitecore-jss-dev-tools": "^21.1.0-canary.76",
     "@sitecore-jss/sitecore-jss-react": "^21.1.0-canary.76",
-    "node-html-parser": "^6.0.0",
+    "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
     "sync-disk-cache": "^2.1.0"

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts

@@ -174,7 +174,9 @@ export class EditingRenderMiddleware {
       // Return expected JSON result
       debug.editing('editing render middleware end: %o', { status: 200, body });
       res.status(200).json(body);
-    } catch (error) {
+    } catch (err) {
+      const error = err as Record<string, unknown>;
+
       console.error(error);
 
       if (error.response || error.request) {

packages/sitecore-jss-nextjs/src/index.ts

@@ -3,6 +3,7 @@ export {
   // generic data access
   HttpDataFetcher,
   HttpResponse,
+  AxiosResponse,
   AxiosDataFetcher,
   AxiosDataFetcherConfig,
   NativeDataFetcher,