TypeError: Cannot read property 'name' of undefined

[tu4mo]

TypeError: Cannot read property 'name' of undefined
Occurred while linting /Users/../Test.tsx:9
    at /Users/.../node_modules/eslint-plugin-react/lib/util/propTypes.js:318:49
    at Array.forEach (<anonymous>)
    at declarePropTypesForTSTypeAnnotation (/Users/.../node_modules/eslint-plugin-react/lib/util/propTypes.js:317:33)
    at markPropTypesAsDeclared (/Users/.../node_modules/eslint-plugin-react/lib/util/propTypes.js:595:33)
    at Object.markAnnotatedFunctionArgumentsAsDeclared (/Users/.../node_modules/eslint-plugin-react/lib/util/propTypes.js:633:7)
    at updatedRuleInstructions.<computed> (/Users/.../node_modules/eslint-plugin-react/lib/util/Components.js:902:43)
    at /Users/.../node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/.../node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/.../node_modules/eslint/lib/linter/node-event-generator.js:254:26)

Reproduction:

import React from 'react'
import PropTypes from 'prop-types'

interface Props {
  something: string
  [key: string]: any
}

const Component = (props: Props) => <div>Hello</div>

Component.propTypes = {
  something: PropTypes.string
}

export { Component }

[lencioni]

I am also able to reproduce this with the following file:

function foo({
  test,
}: {
  [key: string]: any;
}) {
  return;
}

It seems to be related to this part: [key: string]: any;

This works in 7.19.0 and is broken in 7.20.0.

[dhoko]

Same error

Reproduction:

1. $ git clone --depth 1 --single-branch [email protected]:ProtonMail/react-components.git
2. $ npm i && npm run lint
3. 💥

[atlas]: /tmp/react-components [master] 
$ npm run lint --no-cache

> [email protected] lint /tmp/react-components
> eslint containers components --ext .js,.ts,.tsx --quiet --cache

TypeError: Cannot read property 'name' of undefined
Occurred while linting /tmp/react-components/containers/password/AskAuthModal.tsx:12
    at /tmp/react-components/node_modules/eslint-plugin-react/lib/util/propTypes.js:317:49
    at Array.forEach (<anonymous>)
    at declarePropTypesForTSTypeAnnotation (/tmp/react-components/node_modules/eslint-plugin-react/lib/util/propTypes.js:316:33)
    at markPropTypesAsDeclared (/tmp/react-components/node_modules/eslint-plugin-react/lib/util/propTypes.js:594:33)
    at Object.markAnnotatedFunctionArgumentsAsDeclared (/tmp/react-components/node_modules/eslint-plugin-react/lib/util/propTypes.js:632:7)
    at updatedRuleInstructions.<computed> (/tmp/react-components/node_modules/eslint-plugin-react/lib/util/Components.js:902:43)
    at /tmp/react-components/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/tmp/react-components/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/tmp/react-components/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: `eslint containers components --ext .js,.ts,.tsx --quiet --cache`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/react-components/false/_logs/2020-06-30T15_53_16_643Z-debug.log


[atlas]: /tmp/react-components [master] 
$ npx eslint /tmp/react-components/containers/password/AskAuthModal.tsx --no-cache
Cannot read property 'name' of undefined
Occurred while linting /tmp/react-components/containers/password/AskAuthModal.tsx:12

File: AskAuthModal.tsx

import React, { useState } from 'react';
import { c } from 'ttag';
import { FormModal, PasswordTotpInputs, useUserSettings } from '../../index';

interface Props {
    onClose?: () => void;
    onSubmit: (data: { password: string; totp: string }) => void;
    error: string;
    hideTotp?: boolean;
    [key: string]: any;
}
const AskAuthModal = ({ onClose, onSubmit, error, hideTotp, ...rest }: Props) => {
    const [password, setPassword] = useState('');
    const [totp, setTotp] = useState('');
    const [{ '2FA': { Enabled } } = { '2FA': { Enabled: 0 } }] = useUserSettings();

    const showTotp = !hideTotp && !!Enabled;

    return (
        <FormModal
            onClose={onClose}
            onSubmit={() => onSubmit({ password, totp })}
            title={c('Title').t`Sign in again to continue`}
            close={c('Label').t`Cancel`}
            submit={c('Label').t`Submit`}
            error={error}
            small
            {...rest}
        >
            <PasswordTotpInputs
                password={password}
                setPassword={setPassword}
                passwordError={error}
                totp={totp}
                setTotp={setTotp}
                totpError={error}
                showTotp={showTotp}
            />
        </FormModal>
    );
};

export default AskAuthModal;

About the env:

version eslint-plugin-react "7.20.2"
Node latest LTS/ latest npm
or v12.16.3/6.14.4

For me it works with the version 7.20.0. but not with > 7.20.0.

[ljharb]

Duplicate of #2687; will be fixed in the next release, which will be going out today.

[ljharb]

v7.20.3 is released.

[dhoko]

@ljharb yep I can confirm, it works 👍 thx