S6767 FP: Invalid `PropType is defined but prop is never used` error

SonarQube Cloud
, ,
1

We have a nextjs/react/web project. In the component library we have a react component:

type ParallaxImagesProps = {
  images: ImageReference[];
};

export const ParallaxImages = (props: ParallaxImagesProps) => {
  const { images } = useParallaxImages(props);

  // ...

The hook useParallaxImages is:

const useParallaxImages = ({ images } : ParallaxImagesProps) => {
  // ... logic...

  return {
    images: images.map((img, idx) => {
     // ... logic ...
    }
}

The error we get is:
‘images’ PropType is defined but prop is never used

Marked as a code smell, major.

The issue is shown on the ParallaxImagesProps type.

I can resolve the error by using props.images but seeing that my hook destructs the props and images is used, this seems like a false positive.

Is this a known issue with SonarCloud and type checks?

3

Hi,

Welcome to the community!

Could you help us by identifying the rule that’s raising the issue? The ID will look like S123.

 
Thx,
Ann

4

I’ll have to recreate it, the Sonar console doesn’t give me access to previous failed runs on our PRs.

5

image
image1119×427 39.9 KB

The id is typescript:S6767

The code is not totally identically as the code base has moved forward, but same error

1 Like
6

Hi,

Thanks for this! I’ve flagged the thread for the language experts.

 
Ann

8

Hello Richard,

Thank you for posting. I’m trying to write a reproducer for your issue, but have not been able to reproduce it so far.

Here is what I tried, can you have a look?

type ImageReference = number;

type ParallaxImagesProps = {
  images: ImageReference[]; // Noncompliant: issue raised here
};

const useParallaxImages = ({ images }: ParallaxImagesProps) => {
  // ... logic...

  return {
    images: images.map((img, idx) => {
     // ... logic ...
    }),
  };
}

export const ParallaxImages = (props: ParallaxImagesProps) => {
  const { images } = useParallaxImages(props);
};
9

Hey Ilia,

I’ve tried it on a number of components, and got the same warning. I made smaller sample and got:

image
image1571×763 63.8 KB

The types are more complex, but here is the example:

enum ImageOrientation {
  left = 'left',
  right = 'right',
}

type ImageReference = {
  valid: boolean;
  uid: string;
  href: string;
};

type ParallaxEffect = {
  orientation: ImageOrientation;
  size: string;
  href: string;
};

type ParallaxImagesProps = {
  images: ImageReference[];
};

const useParallaxImages = ({ images }: ParallaxImagesProps) => {
  return {
    images: images.map((img, idx) => {
      return {
        ...img,
        size: '1',
        orientation: ImageOrientation.left,
      };
    }),
  };
};

const ParallaxImage = ({ orientation, size, href }: ParallaxEffect) => {
  return (
    <div>{orientation}, {size}, {href}</div>
  );
};

export const ParallaxImages = (props: ParallaxImagesProps) => {
  const { images } = useParallaxImages(props);

  return (
    <>
      {
        images.map(i => i.valid && <ParallaxImage key={i.uid} orientation={i.orientation} href={i.href} size={i.size} />)
      }
    </>
  );
};
10

Thank you for the complete and working reproducer. I have opened a ticket to track this issue: Jira

1 Like