0

In terms of Sitecore NextJS, I'm a complete beginner. This problem is beyond my knowledge. Please assist me in resolving the following issues.

Complete Code:

  import {
  Text,
  Field,
  withDatasourceCheck,
  Item,
  Image as JssImage,
  ImageField,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
type IconTitleDescriptionListProps = ComponentProps & {
  fields: {
    title: Field<string>;
    description: Field<string>;
    IconTitleDescriptionList: Item[];
    image: ImageField;
  };
};
const IconTitleDescriptionList = (props: IconTitleDescriptionListProps): JSX.Element => (
  <section className="py-5" id="features">
    <div className="container px-5 my-5">
      <div className="row gx-5">
        <div className="col-lg-4 mb-5 mb-lg-0">
          <h2 className="fw-bolder mb-0">
            <Text field={props?.fields?.title} />
          </h2>
          <p className="mb-0">{props?.fields?.description?.value}</p>
        </div>
        <div className="col-lg-8">
          <div className="row gx-5 row-cols-1 row-cols-md-2">
            {props?.fields?.IconTitleDescriptionList?.map((element, index) => {
              return (
                <div key={index} className="col mb-5 h-100">
                  <div className="feature bg-primary bg-gradient text-white rounded-3 mb-3">
                    <i className="bi bi-collection"></i>
                  </div>
                  <JssImage classsName="img-fluid rounded-3 my-5" field={element?.fields?.image} />
                  <h1 className="h1">
                    <Text field={element?.fields?.title} />
                  </h1>
                  <p className="h3">
                    <Text field={element?.fields?.SubTitle} />
                  </p>
                  <p className="mb-0">
                    <Text field={element?.fields?.description} />
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  </section>
);
export default withDatasourceCheck()<IconTitleDescriptionListProps>(IconTitleDescriptionList);

Errors:

enter image description here

#Error 1:

 (property) ImageProps.field?: ImageField | ImageFieldValue | undefined
Image field data (consistent with other field types)

Type 'Item | Item[] | Field<GenericFieldValue> | undefined' is not assignable to type 'ImageField | ImageFieldValue | undefined'.
  Type 'Item' is not assignable to type 'ImageField | ImageFieldValue | undefined'.
    Type 'Item' is not assignable to type 'ImageFieldValue'.
      Index signature for type 'string' is missing in type 'Item'.ts(2322)
Image.d.ts(35, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & ImageProps'

# Error 2:

(property) TextProps.field?: TextField | undefined
The text field data.

Type 'Item | Item[] | Field<GenericFieldValue> | undefined' is not assignable to type 'TextField | undefined'.ts(2322)
Text.d.ts(9, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & TextProps'

Reference screens :

enter image description here

enter image description here

2 Answers 2

1

Check your @sitecore-jss/sitecore-jss-nextjs version, if it is 20.1.0 or later then use NextImage component

It shows how to display a responsive, optimized, editable image:-

<NextImage field={props.fields.image} height="51" width="204" />

below example shows how to display a non-editable image where you control the resizing and editing:

<NextImage
  field={props.fields.image}
  editable={false}
  unoptimized={true}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"/>

Here's a Link https://doc.sitecore.com/xp/en/developers/hd/201/sitecore-headless-development/configuring-the-jss-nextimage-component.html

1
  • Thanks Sumit and praveen. It's working for me.
    – Suresh R
    Feb 20, 2023 at 6:45
2

You need to use something like this

<Text field={element?.fields?.SubTitle as Field} />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.