create-sitecore-jss 22.7.0-canary.1 → 22.7.0-canary.10

package/dist/templates/angular-xmcloud/package.json

@@ -8,8 +8,8 @@
     "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
   },
   "dependencies": {
-    "@sitecore-cloudsdk/core": "^0.5.0",
-    "@sitecore-cloudsdk/events": "^0.5.0",
+    "@sitecore-cloudsdk/core": "^0.5.1",
+    "@sitecore-cloudsdk/events": "^0.5.1",
     "font-awesome": "^4.7.0",
     "sass": "^1.52.3",
     "sass-alias": "^1.0.5"

package/dist/templates/nextjs/package.json

@@ -26,28 +26,18 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "<%- version %>",
-    "graphql": "~15.8.0",
-    "graphql-tag": "^2.12.6",
-    "next": "^14.2.18",
+    "next": "^15.3.1",
     "next-localization": "^0.12.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/import-types-preset": "^3.0.0",
-    "@graphql-codegen/plugin-helpers": "^5.0.1",
-    "@graphql-codegen/typed-document-node": "^5.0.1",
-    "@graphql-codegen/typescript": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-resolvers": "^4.0.1",
-    "@graphql-typed-document-node/core": "^3.2.0",
     "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
     "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@types/node": "^22.9.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "chalk": "~4.1.2",
@@ -59,22 +49,19 @@
     "eslint-config-next": "^13.1.5",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-yaml": "^0.5.0",
-    "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
-    "typescript": "~5.4.0",
-    "yaml-loader": "^0.8.0"
+    "typescript": "~5.4.0"
   },
   "scripts": {
     "jss": "jss",
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
-    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
+    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",
     "build": "cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build",
-    "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
     "next:build": "next build",
     "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "next:start": "next start",

package/dist/templates/nextjs/scripts/templates/component-src.ts

@@ -6,6 +6,7 @@
 function generateComponentSrc(componentName: string): string {
   return `import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
+import { JSX } from 'react';
 
 type ${componentName}Props = ComponentProps & {
   fields: {

package/dist/templates/nextjs/src/Bootstrap.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable  @typescript-eslint/no-unused-vars */
+import { JSX } from 'react';
 import { SitecorePageProps } from 'lib/page-props';
 
 /**

package/dist/templates/nextjs/src/Layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import Head from 'next/head';
 import { Placeholder, LayoutServiceData, Field, HTMLLink } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';

package/dist/templates/nextjs/src/Navigation.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import config from 'temp/config';
 
 // Prefix public assets with a public URL to enable compatibility with Sitecore editors.

package/dist/templates/nextjs/src/NotFound.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Head from 'next/head';
 
 /**

package/dist/templates/nextjs/src/Scripts.tsx

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+
 const Scripts = (): JSX.Element | null => {
   return null;
 };

package/dist/templates/nextjs/src/components/ContentBlock.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, RichText, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 

package/dist/templates/nextjs/src/lib/next-config/plugins/monorepo.js

@@ -5,7 +5,7 @@ const monorepoPlugin = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack: (config, options) => {
       if (options.isServer) {
-        config.externals = ['react', 'vertx', ...config.externals];
+        config.externals = ['vertx', ...config.externals];
       }
 
       // Overload the Webpack config if it was already overloaded
@@ -14,7 +14,7 @@ const monorepoPlugin = (nextConfig = {}) => {
       }
 
       return config;
-    }
+    },
   });
 };
 

package/dist/templates/nextjs/src/pages/404.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import NotFound from 'src/NotFound';
 
 const Custom404 = (): JSX.Element => <NotFound />;

package/dist/templates/nextjs/src/pages/[[...path]].tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, JSX } from 'react';
 <% if (prerender === 'SSG') { -%>
 import { GetStaticPaths, GetStaticProps } from 'next';
 <% } else if (prerender === 'SSR') { -%>

package/dist/templates/nextjs/src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'; 
 import type { AppProps } from 'next/app';
 import { I18nProvider } from 'next-localization';
 import { SitecorePageProps } from 'lib/page-props';

package/dist/templates/nextjs/src/temp/gitignore

@@ -1,3 +1,2 @@
 *
 !.gitignore
-!GraphQLIntrospectionResult.json

package/dist/templates/nextjs/tsconfig.json

@@ -6,7 +6,6 @@
       "lib/*": ["src/lib/*"],
       "temp/*": ["src/temp/*"],
       "assets/*": ["src/assets/*"],
-      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
       "react": ["node_modules/react"]
     },
     "target": "es5",

package/dist/templates/nextjs-styleguide/graphql.d.ts

@@ -0,0 +1,5 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql';
+  const document: DocumentNode;
+  export default document;
+}

package/dist/templates/nextjs-styleguide/package.json

@@ -5,7 +5,9 @@
   },
   "devDependencies": {
     "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
-    "@types/nprogress": "^0.2.0"
+    "@types/nprogress": "^0.2.0",
+    "graphql": "^16.11.0",
+    "graphql-tag": "^2.12.6"
   },
   "scripts": {
     "start": "cross-env NODE_ENV=development JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",

package/dist/templates/nextjs-styleguide/src/Navigation.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';
 import config from 'temp/config';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Checkbox.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, getFieldValue } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ContentList.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Custom.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Date.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { DateField, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-File.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { File, FileField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { NextImage, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-ItemLink.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Text, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Link.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Link, LinkField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Number.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-RichText.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { RichText, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Text.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, getFieldValue, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { JSX, useEffect } from 'react';
 import {
   Text,
   Link,
@@ -8,24 +8,67 @@ import {
   withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';
-import {
-  resetEditorChromes
-} from '@sitecore-jss/sitecore-jss-nextjs/utils';
+import { resetEditorChromes } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import NextLink from 'next/link';
-import { ConnectedDemoQueryDocument } from './GraphQL-ConnectedDemo.dynamic.graphql';
-import {
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
-  Item,
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
-} from 'graphql-types';
+import ConnectedDemoQuery from './GraphQL-ConnectedDemo.dynamic.graphql';
 import { ComponentProps } from 'lib/component-props';
 import config from 'temp/config';
 
-type RouteItem = AppRoute & Item;
+type GraphQLConnectedDemoDataSource = {
+  sample1: {
+    jsonValue: {
+      value: string;
+    };
+    value: string;
+  };
+  sample2: {
+    definition: {
+      type: string;
+      shared: boolean;
+    };
+    jsonValue: {
+      value: {
+        href: string;
+        linktype: string;
+        target: string;
+        text: string;
+        url: string;
+      };
+    };
+    target: string;
+    text: string;
+    url: string;
+  };
+  name: string;
+  id: string;
+};
+
+type Item = {
+  id: string;
+  url: {
+    path: string;
+  };
+  pageTitle: {
+    value: string;
+    jsonValue: {
+      value: string;
+    };
+  };
+};
+
+type ItemSearchResults = {
+  results: Item[];
+};
 
 type GraphQLConnectedDemoData = {
-  datasource: GrapQLConnectedDemoDatasource;
-  contextItem: RouteItem;
+  datasource: GraphQLConnectedDemoDataSource;
+  contextItem: {
+    id: string;
+    children: ItemSearchResults;
+    pageTitle: {
+      value: string;
+    };
+  };
 };
 
 type GraphQLConnectedDemoProps = ComponentProps & GraphQLConnectedDemoData;
@@ -82,7 +125,7 @@ const GraphQLConnectedDemo = (props: GraphQLConnectedDemoProps): JSX.Element =>
           children:
           <ul>
             {props.contextItem.children.results.map((child) => {
-              const routeItem = child as RouteItem;
+              const routeItem = child as Item;
 
               return (
                 <li key={routeItem.id}>
@@ -115,7 +158,7 @@ export const getStaticProps: GetStaticComponentProps = async (rendering, layoutD
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,
@@ -143,7 +186,7 @@ export const getServerSideProps: GetServerSideComponentProps = async (rendering,
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-IntegratedDemo.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Link, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import NextLink from 'next/link';
@@ -114,9 +115,7 @@ const GraphQLIntegratedDemo = (props: GraphQlIntegratedDemoProps): JSX.Element =
           <ul>
             {contextItem.children.results.map((child: Item) => (
               <li key={child.id}>
-                <NextLink href={child.url.path}>
-                  {child.pageTitle.value}
-                </NextLink>
+                <NextLink href={child.url.path}>{child.pageTitle.value}</NextLink>
                 &nbsp; (editable title too! <Text field={child.pageTitle.jsonValue} />)
               </li>
             ))}

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-Layout.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Placeholder, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 
@@ -28,7 +29,10 @@ const GraphQLLayout = ({ rendering }: ComponentProps): JSX.Element => {
         </>
       )}
       {!disconnectedMode && (
-        <Placeholder name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout" rendering={rendering} />
+        <Placeholder
+          name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
+          rendering={rendering}
+        />
       )}
     </div>
   );

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-ComponentParams.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-CustomRouteType.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { useSitecoreContext, Text, RichText, Field } from '@sitecore-jss/sitecore-jss-nextjs';
 
@@ -27,9 +28,7 @@ const StyleguideCustomRouteType = (): JSX.Element => {
 
       <RichText field={fields.content} />
 
-      <Link href="/styleguide">
-        Return to the Styleguide
-      </Link>
+      <Link href="/styleguide">Return to the Styleguide</Link>
     </div>
   );
 };

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-EditFrame.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Item, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { EditFrame } from '@sitecore-jss/sitecore-jss-nextjs';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Reuse.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Tabs-Tab.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import {
   Text,
   RichText,
@@ -7,13 +8,15 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 
-type StyleguideLayoutTabsTabProps = ComponentProps & {
+export type TabProps = {
   fields: {
     content: Field<string>;
     title: Field<string>;
   };
 };
 
+type StyleguideLayoutTabsTabProps = ComponentProps & TabProps;
+
 /**
  * This is a single tab within the tabs sample component. These are added to the tabs placeholder.
  * This component demonstrates conditionally altering rendering when in the Sitecore Experience Editor to improve

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Tabs.tsx

@@ -3,6 +3,7 @@ import { withPlaceholder, withSitecoreContext, Text } from '@sitecore-jss/siteco
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentWithContextProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+import { TabProps } from './Styleguide-Layout-Tabs-Tab';
 
 interface StyleguideLayoutTabsState {
   activeTabIndex: number;
@@ -55,7 +56,7 @@ class StyleguideLayoutTabs extends React.Component<
           */}
           {!isEditing &&
             (tabsPlaceholder || [])
-              .filter((tab: ReactElement) => tab.props && tab.props.fields)
+              .filter((tab: ReactElement) => tab.props && (tab.props as TabProps).fields)
               .map((tab: ReactElement, index: number) => (
                 <li className="nav-item" key={`tab${index}`}>
                   <a
@@ -63,14 +64,14 @@ class StyleguideLayoutTabs extends React.Component<
                     onClick={() => this.setActiveTab(index)}
                     href="#t"
                   >
-                    <Text field={tab.props.fields.title} />
+                    <Text field={(tab.props as TabProps).fields.title} />
                   </a>
                 </li>
               ))}
         </ul>
         <div className="p-3 border-left border-right border-bottom">
           {(tabsPlaceholder || []).map((tab: ReactElement) => {
-            const isValid = tab.props && tab.props.fields;
+            const isValid = tab.props && (tab.props as TabProps).fields;
 
             // allow experience editor markup components to render
             if (!isValid && isEditing) return tab;

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import {
   Placeholder,
   getChildPlaceholder,

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Multilingual.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-RouteFields.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { Text, Field, useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Section.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Field, Placeholder, Text, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-SitecoreContext.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentProps } from 'lib/component-props';

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Specimen.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';

package/dist/templates/{nextjs → nextjs-styleguide}/src/lib/next-config/plugins/graphql.js

@@ -7,19 +7,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       config.module.rules.push({
         test: /\.graphql$/,
         exclude: /node_modules/,
-        use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
-      });
-    
-      config.module.rules.push({
-        test: /\.graphqls$/,
-        exclude: /node_modules/,
-        use: ['graphql-let/schema/loader'],
-      });
-    
-      config.module.rules.push({
-        test: /\.ya?ml$/,
-        type: 'json',
-        use: 'yaml-loader',
+        loader: 'graphql-tag/loader',
       });
 
       // Overload the Webpack config if it was already overloaded
@@ -28,7 +16,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       }
 
       return config;
-    }
+    },
   });
 };
 

package/dist/templates/nextjs-styleguide/src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import type { AppProps } from 'next/app';
 import Router from 'next/router';
 import { I18nProvider } from 'next-localization';

package/dist/templates/nextjs-styleguide-tracking/src/Navigation.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';
 import config from 'temp/config';

package/dist/templates/nextjs-styleguide-tracking/src/Scripts.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { VisitorIdentification } from '@sitecore-jss/sitecore-jss-nextjs';
 
 const Scripts = (): JSX.Element => {

package/dist/templates/nextjs-styleguide-tracking/src/components/styleguide/Styleguide-Tracking.tsx

@@ -18,13 +18,13 @@ type StyleguideTrackingProps = ComponentWithContextProps & StyleguideSpecimenFie
  * Demonstrates analytics tracking patterns (xDB)
  */
 class StyleguideTracking extends React.Component<StyleguideTrackingProps> {
-  private event: RefObject<HTMLInputElement>;
-  private goal: RefObject<HTMLInputElement>;
-  private outcomeName: RefObject<HTMLInputElement>;
-  private outcomeValue: RefObject<HTMLInputElement>;
-  private campaign: RefObject<HTMLInputElement>;
-  private pageId: RefObject<HTMLInputElement>;
-  private pageUrl: RefObject<HTMLInputElement>;
+  private event: RefObject<HTMLInputElement | null>;
+  private goal: RefObject<HTMLInputElement | null>;
+  private outcomeName: RefObject<HTMLInputElement | null>;
+  private outcomeValue: RefObject<HTMLInputElement | null>;
+  private campaign: RefObject<HTMLInputElement | null>;
+  private pageId: RefObject<HTMLInputElement | null>;
+  private pageUrl: RefObject<HTMLInputElement | null>;
 
   private trackingApiOptions: TrackingRequestOptions;
 

package/dist/templates/nextjs-sxa/scripts/templates/component-src.ts

@@ -4,7 +4,7 @@
  * @returns component src boilerplate as a string
  */
 function generateComponentSrc(componentName: string): string {
-  return `import React from 'react';
+  return `import { JSX } from 'react';
 import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface ${componentName}Props {