[sitecore-jss-nextjs]: Recommending fix to minimized React 18 warnings with nextjs & defaultProps errors

CHANGELOG.md

@@ -9,6 +9,13 @@ Our versioning strategy is as follows:
 - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements)
 - Major: may include breaking changes in core packages (e.g. major architectural changes, major features)
 
+## Unreleased
+
+### 🐛 Bug Fixes
+
+* `[sitecore-jss-nextjs]` Fixed issue with sitecore-jss-nextjs field components using deprecated feature (`.defaultProps`) when using react 18+
+
+
 ## 21.8.0
 
 ### 🛠 Breaking Changes
@@ -118,7 +125,6 @@ Our versioning strategy is as follows:
 * `[sitecore-jss-nextjs]` The _GraphQLRequestClient_ import from _@sitecore-jss/sitecore-jss-nextjs_ is deprecated, use import from _@sitecore-jss/sitecore-jss-nextjs/graphql_ submodule instead ([#1650](https://github.com/Sitecore/jss/pull/1650) [#1648](https://github.com/Sitecore/jss/pull/1648))
 * `[create-sitecore-jss]` Introduced `nextjs-xmcloud` initializer template. This will include all base XM Cloud features, including Personalize, FEaaS, BYOC, Sitecore Edge Platform and Context support. ([#1653](https://github.com/Sitecore/jss/pull/1653)) ([#1657](https://github.com/Sitecore/jss/pull/1657)) ([#1658](https://github.com/Sitecore/jss/pull/1658))
 * `[sitecore-jss-nextjs]` `[templates/nextjs-xmcloud]` Page state (preview, edit, normal) is available through shared context. This allows access to the state for integrations such as CloudSDK and FEAAS. ([#1703](https://github.com/Sitecore/jss/pull/1703))
-<<<<<<< HEAD
 * `[sitecore-jss-nextjs] [templates/nextjs-xmcloud]` SDK initialization rejections are now correctly handled. Errors should no longer occur after getSDK() promises resolve when they shouldn't (for example, getting Events SDK in development environment) ([#1712](https://github.com/Sitecore/jss/pull/1712) [#1715](https://github.com/Sitecore/jss/pull/1715) [#1716](https://github.com/Sitecore/jss/pull/1716))
 
 ### 🐛 Bug Fixes
@@ -163,10 +169,6 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
-=======
-
-### 🐛 Bug Fixes
-
 * `[templates/nextjs]` `[sitecore-jss-nextjs]` Fix making a fetch to a nextjs api route in an editing environment, by adding additional variable publicUrl in runtime config ([#1656](https://github.com/Sitecore/jss/pull/1656))
 * `[templates/nextjs-multisite]` Fix site info fetch errors (now skipped) on XM Cloud rendering/editing host builds. ([#1649](https://github.com/Sitecore/jss/pull/1649)) ([#1653](https://github.com/Sitecore/jss/pull/1653))
 * `[templates/nextjs-xmcloud]` Fix double registration of BYOC components ([#1707](https://github.com/Sitecore/jss/pull/1707)) ([#1709](https://github.com/Sitecore/jss/pull/1709))
@@ -207,7 +209,6 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
->>>>>>> 9ff9c09d8862989de9f45ef68ee95a7efe633457
 * `[sitecore-jss-nextjs]` Fix loop error in redirect middleware when the pattern of redirect has default locale. ([#1696](https://github.com/Sitecore/jss/pull/1696))
 * `[templates/nextjs-sxa]` Fix shown horizontal scrollbar in EE mode. ([#1625](https://github.com/Sitecore/jss/pull/1625)), ([#1626](https://github.com/Sitecore/jss/pull/1626))
 
@@ -727,15 +728,12 @@ Our versioning strategy is as follows:
 
 * `[sitecore-jss]` Retry policy to handle transient network errors. Users can pass `retryStrategy` to configure custom retry config to the services. They can customize the error codes and the number of retries. It consist of two functions shouldRetry and getDelay. To determine the back-off time, we employ an exponential strategy with a default factor of 2.([#1731](https://github.com/Sitecore/jss/pull/1731)) ([#1733](https://github.com/Sitecore/jss/pull/1733))
 
-<<<<<<< HEAD
-=======
 ## 20.2.3
 
 ### 🐛 Bug Fixes
 
 * `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Link component does not add anchor to the internal links ([#1226](https://github.com/Sitecore/jss/pull/1226))
 
->>>>>>> 9ff9c09d8862989de9f45ef68ee95a7efe633457
 ## 20.2.2
 
 ### 🧹 Chores
@@ -1484,4 +1482,4 @@ packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx to prevent cons
 * The `node-headless-ssr-proxy` example will correctly perform `startsWith()` instead of `indexOf()` matching on proxy-excluded paths. This prevents excluding `/foo` from also excluding `/bar/foo`. Path matching is also now case-insensitive to match Sitecore convention.
 * SSL certificate validation is no longer disabled by default in `node-headless-ssr-proxy`, which is a security issue.
 * The `node-headless-ssr-proxy` example will server-side render dictionaries correctly.
-* The `sitecore-jss-proxy` library will no longer double-encode incoming URLs that contain encoded characters, such as spaces (`%20`), when proxying to the Layout Service.
+* The `sitecore-jss-proxy` library will no longer double-encode incoming URLs that contain encoded characters, such as spaces (`%20`), when proxying to the Layout Service.

packages/sitecore-jss-nextjs/src/components/Link.tsx

@@ -21,7 +21,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (props: LinkProps, ref): JSX.Element | null => {
     const {
       field,
-      editable,
+      editable = true,
       children,
       internalLinkMatcher = /^\//g,
       showLinkTextWithChildrenPresent,
@@ -72,10 +72,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   }
 );
 
-Link.defaultProps = {
-  editable: true,
-};
-
 Link.displayName = 'NextLink';
 
 Link.propTypes = {

packages/sitecore-jss-nextjs/src/components/NextImage.tsx

@@ -12,15 +12,11 @@ import Image, { ImageProps as NextImageProperties } from 'next/image';
 
 type NextImageProps = Omit<ImageProps, 'media'> & Partial<NextImageProperties>;
 
-export const NextImage: React.FC<NextImageProps> = ({
-  editable,
-  imageParams,
-  field,
-  mediaUrlPrefix,
-  fill,
-  priority,
-  ...otherProps
-}) => {
+export const NextImage: React.FC<NextImageProps> = (
+  { editable, imageParams, field, mediaUrlPrefix, fill, priority, ...otherProps } = {
+    editable: true,
+  }
+) => {
   // next handles src and we use a custom loader,
   // throw error if these are present
   if (otherProps.src) {
@@ -105,8 +101,4 @@ NextImage.propTypes = {
   ),
 };
 
-NextImage.defaultProps = {
-  editable: true,
-};
-
 NextImage.displayName = 'NextImage';

packages/sitecore-jss-nextjs/src/components/RichText.tsx

@@ -24,10 +24,15 @@ export type RichTextProps = ReactRichTextProps & {
 
 const prefetched: { [cacheKey: string]: boolean } = {};
 
-export const RichText = (props: RichTextProps): JSX.Element => {
-  const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, ...rest } = props;
+export const RichText = (props: RichTextProps = { tag: 'div', editable: true }): JSX.Element => {
+  const {
+    internalLinksSelector = 'a[href^="/"]',
+    prefetchLinks = true,
+    editable = true,
+    ...rest
+  } = props;
   const hasText = props.field && props.field.value;
-  const isEditing = props.editable && props.field && props.field.editable;
+  const isEditing = editable && props.field && props.field.editable;
 
   const router = useRouter();
   const richTextRef = useRef<HTMLElement>(null);
@@ -77,9 +82,4 @@ RichText.propTypes = {
   ...RichTextPropTypes,
 };
 
-RichText.defaultProps = {
-  tag: 'div',
-  editable: true,
-};
-
 RichText.displayName = 'NextRichText';

packages/sitecore-jss-react/src/components/Date.tsx

@@ -24,7 +24,7 @@ export interface DateFieldProps {
 export const DateField: React.FC<DateFieldProps> = ({
   field,
   tag,
-  editable,
+  editable = true,
   render,
   ...otherProps
 }) => {
@@ -68,8 +68,4 @@ DateField.propTypes = {
   render: PropTypes.func,
 };
 
-DateField.defaultProps = {
-  editable: true,
-};
-
 DateField.displayName = 'Date';

packages/sitecore-jss-react/src/components/Image.tsx

@@ -150,7 +150,7 @@ export const getEEMarkup = (
 
 export const Image: React.FC<ImageProps> = ({
   media,
-  editable,
+  editable = true,
   imageParams,
   field,
   mediaUrlPrefix,
@@ -218,8 +218,4 @@ Image.propTypes = {
   ),
 };
 
-Image.defaultProps = {
-  editable: true,
-};
-
 Image.displayName = 'Image';

packages/sitecore-jss-react/src/components/Link.tsx

@@ -41,7 +41,7 @@ export type LinkProps = React.DetailedHTMLProps<
 };
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => {
+  ({ field, editable = true, showLinkTextWithChildrenPresent, ...otherProps }, ref) => {
     const children = otherProps.children as React.ReactNode;
     const dynamicField: LinkField | LinkFieldValue = field;
 
@@ -143,8 +143,4 @@ export const LinkPropTypes = {
 
 Link.propTypes = LinkPropTypes;
 
-Link.defaultProps = {
-  editable: true,
-};
-
 Link.displayName = 'Link';

packages/sitecore-jss-react/src/components/RichText.tsx

@@ -24,7 +24,7 @@ export interface RichTextProps {
 }
 
 export const RichText: React.FC<RichTextProps> = forwardRef(
-  ({ field, tag, editable, ...otherProps }, ref) => {
+  ({ field, tag = 'div', editable = true, ...otherProps }, ref) => {
     if (!field || (!field.editable && !field.value)) {
       return null;
     }
@@ -52,9 +52,4 @@ export const RichTextPropTypes = {
 
 RichText.propTypes = RichTextPropTypes;
 
-RichText.defaultProps = {
-  tag: 'div',
-  editable: true,
-};
-
 RichText.displayName = 'RichText';

packages/sitecore-jss-react/src/components/Text.tsx

@@ -29,8 +29,8 @@ export interface TextProps {
 export const Text: FunctionComponent<TextProps> = ({
   field,
   tag,
-  editable,
-  encode,
+  editable = true,
+  encode = true,
   ...otherProps
 }) => {
   if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
@@ -107,9 +107,4 @@ Text.propTypes = {
   encode: PropTypes.bool,
 };
 
-Text.defaultProps = {
-  editable: true,
-  encode: true,
-};
-
 Text.displayName = 'Text';