Error: VariableDeclarator ASTNodes are not handled by markPropTypesAsUsed

[johnridesabike]

ESLint started crashing with this error shortly after I upgraded to 7.14.0.

I suspect it's related to prop destructuring. I tried opening different JSX files and ESLint didn't seem to have a problem except for files with components that destructure their props.

Full error log:

[Error - 8:04:55 PM] ESLint stack trace:
[Error - 8:04:55 PM] Error: VariableDeclarator ASTNodes are not handled by markPropTypesAsUsed
Occurred while linting /Users/.../src/pages/tournament/status.jsx:8
    at markPropTypesAsUsed (/Users/.../node_modules/eslint-plugin-react/lib/util/usedPropTypes.js:338:15)
    at Object.VariableDeclarator (/Users/.../node_modules/eslint-plugin-react/lib/util/usedPropTypes.js:492:9)
    at updatedRuleInstructions.(anonymous function) (/Users/.../node_modules/eslint-plugin-react/lib/util/Components.js:780:47)
    at listeners.(anonymous function).forEach.listener (/Users/.../node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/.../node_modules/eslint/lib/util/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/.../node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/.../node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/Users/.../node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/Users/.../node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:632:23)

[golopot]

Can you share the code that produce the bug?

[johnridesabike]

Here's one example:

import {Panel, PanelContainer} from "../../components/utility";
import PropTypes from "prop-types";
import React from "react";
import RoundTable from "./round/round-table";
import {ScoreTable} from "./scores";

export default function Status({tournament}) {
    const {tourney, getPlayer} = tournament;
    const lastRound = (function () {
        if (tourney.roundList.length === 0) {
            return <p>No rounds played yet.</p>;
        }
        const lastRoundId = tourney.roundList.length - 1;
        if (tourney.roundList[lastRoundId].length === 0) {
            return (
                <p>Matched players in the current round will be shown here.</p>
            );
        }
        return (
            <RoundTable
                roundId={lastRoundId}
                tournament={tournament}
                compact
            />
        );
    }());
    return (
        <>
            <h2 style={{textAlign: "center"}}>Tournament status</h2>
            <PanelContainer
                style={{justifyContent: "center"}}
            >
                <Panel>
                    {lastRound}
                </Panel>
                <Panel>
                    <ScoreTable
                        getPlayer={getPlayer}
                        title="Rankings"
                        tourney={tourney}
                        compact
                    />
                </Panel>
            </PanelContainer>
        </>
    );
}
Status.propTypes = {
    tournament: PropTypes.object.isRequired
};

If I remove the line const {tourney, getPlayer} = tournament; then ESLint doesn't crash.

[jjarthur]

I started getting this error today also, with a very similar example to yours.

[golopot]

I opened a pr on this. A minimal reproducing example is:

/* react/prop-types: 2 */

const PropTypes = require('prop-types');

function Foo({a}) {
  const {b} = a;
  return <p>{b.nope}</p>;
}
Foo.propTypes = {
  a: PropTypes.shape({
    b: PropTypes.shape({
      _: PropTypes.string,
    }),
  }),
};

[ljharb]

What version of eslint?