Imported propTypes triggers false positives

[monsieurnebo]

Hello,

Context

Package	Version
eslint	~6.0.1
eslint-plugin-react	~7.14.2

The situation

After updating ESLint, I'm encountering false positives when importing propTypes (that are used in multiple places, for instance).

Let's take a simple example:

// sharedPropTypes.js

import PropTypes from "prop-types";

export default {
  steps : PropTypes.array,
};

// MyComponent.jsx

import React from "react";
import sharedPropTypes from "./sharedPropTypes";

const propTypes = {
  ...sharedPropTypes,
};

function MyComponent(props) {
  // Using steps.map somewhere
}

This scenario is triggering the following lint errors:
error 'steps.map' is missing in props validation react/prop-types

Which is new.

Please note that declaring propTypes in the component file is working fine:

// MyComponent.jsx

import React from "react";
import PropTypes from "prop-types";
import sharedPropTypes from "./sharedPropTypes";

const propTypes = {
  steps : PropTypes.array
};

function MyComponent(props) {
  // Using steps.map somewhere
}

A lead

After some searches, it seems that ESLint is more sensitive since #2301 .

1. Could it be the source?
2. How should I manage this situation in a clean way?

Related issues

#2352
#2343

[Borovensky]

Have the same issue.
eslint: 5.16.0
eslint-plugin-react: 7.14.3

[Borovensky]

@monsieurnebo Hi!
I play a bit around it and this is what I have:
In my case I have this issue when I declaring propTypes in the component file:

// MyComponent.jsx
import React from "react";
import PropTypes from "prop-types";

const propTypes = {
  steps: PropTypes.array
};

function MyComponent(props) {
  // Using steps.map somewhere
}

but if I change the default import of propTypes to a single import from the "prop-types" module the error is gone.

// MyComponent.jsx
import React from "react";
import { array } from "prop-types";

const propTypes = {
  steps: array
};

function MyComponent(props) {
  // Using steps.map somewhere
}

Hope this will help you also.

[ljharb]

You should never have to destructure off of PropTypes to have things work; that’s a bug.

The OP example with sharedPropTypes just won’t work with static analysis; I’d suggest not sharing the entire propTypes object and instead sharing only individual shapes or propTypes.

[monsieurnebo]

@ljharb Thanks for the answer.

Why is this error showing now, and not before? Is that related to #2301 ?

[monsieurnebo]

That's really strange, because I have the same situation in another project (the same props, shared between components), without the lint error...

There must be a difference, that could explain the error... But I'm struggling to find it.

EDIT: Bingo 🎉 I found the difference:

• My initial situation triggers ESLint error when using with a functional component...
• ... But there is no such error with a class component !

ESLint error 🚨

import React from "react";
import sharedPropTypes from "./sharedPropTypes";

const propTypes = {
  ...sharedPropTypes,
};

function MyComponent(props) {
  // Using steps.map somewhere
}

No ESLint error ✅

import React from "react";
import sharedPropTypes from "./sharedPropTypes";

class MyComponent(props) extends React.Component {
  static propTypes = {
    ...sharedPropTypes,
  }
  // Using steps.map somewhere
}

However, I have no clue of the explanation behind this behavior.

[ljharb]

Where did you assign propTypes to MyComponent.propTypes in the SFC version?

[monsieurnebo]

Sorry, I missed the props assignation in the pseudocode. It looks like this:

import React from "react";
import sharedPropTypes from "./sharedPropTypes";

const propTypes = {
  ...sharedPropTypes,
};

function MyComponent(props) {
  // Using steps.map somewhere
}

MyComponent.propTypes = propTypes;

[ljharb]

what happens if you do MyComponent.propTypes = { ...sharedPropTypes }?

[monsieurnebo]

Same error :|

[ljharb]

In that case it really does seem like we're doing something different for classes and SFCs, so that's a bug.

[monsieurnebo]

Good to know!

[jstheoriginal]

@monsieurnebo can you confirm this is only happening inside of a nested function you’ve made that contains JSX and gets called inside of the return of the component? We had this happening in this scenario; but not if the prop is accessed directly in the return of the component.

Eslint seems to think the nested function is a SFC component itself so it thinks it’s missing props in the parameter of the nested function.