Eslint-plugin-react: no-unused-prop-types errors when declaring an empty function as a default component prop

[asafda]

ESlint version 7.5.1

When adding an empty function as a default prop ESLint exits with the following error:

TypeError: Cannot read property 'properties' of undefined
    at markPropTypesAsUsed (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:656:38)
    at iterateProperties (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:825:15)
    at iterateProperties (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:361:11)
    at markPropTypesAsDeclared (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:810:11)
    at MemberExpression (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:1027:13)
    at listeners.(anonymous function).forEach.listener (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (native)
    at Object.emit (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/asafdavid/homeis-dev/home-is-mobile/node_modules/eslint/lib/util/node-event-generator.js:280:22)

The default prop is declared as follows:

FeedWithSubheader.defaultProps = {
  componentRef: (() => {})
};

[alxmiron]

Also experiencing this issue

[asbjornh]

Shouldn't that be:

FeedWithSubheader.defaultProps = {
  componentRef: (() => {})
};

?

I came here because I experienced the issue, and noticed that I misspelled defaultProps as propTypes when I saw your comment. Renaming to defaultProps fixed it for me

[ljharb]

Either way, the OP's code as-typed shouldn't crash.

[silvenon]

I don't understand, what's the full code? I can't reproduce the error, this test case passes:

function MyComponent(props) {
  return <div>{props.foo()}</div>;
}

MyComponent.defaultProps = {
  foo: (() => {}),
}

[asafda]

@silvenon maybe try with a React Component rather than a function

[ljharb]

@asafda so it only breaks for you on a class-based component? (a function is a React Component too)

[silvenon]

The following test case works as well:

class MyComponent extends Component {
  render() {
    return <div>{this.props.foo()}</div>
  }
}
MyComponent.defaultProps = {
  foo: (() => {})
};

(Specifying defaultProps using the static syntax works as well.)

Maybe your lint error was caused by a more specific case?

[asafda]

I can't reproduce it anymore. I guess it was my mistake as @asbjornh noted.
@AlexMarvelo if you can reproduce please share your code, otherwise i'll just close this issue.
Sorry for any time spent on this.

[alxmiron]

Yes, I still suffer from the issue, but looks like it's regarding more about #1542. How can I reproduce:

1. Update to eslint-plugin-react: 7.5.1
2. run eslint . from project root
3. error in terminal:

Cannot read property 'properties' of undefined
TypeError: Cannot read property 'properties' of undefined
    at markPropTypesAsUsed (/Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:656:39)
    at iterateProperties (/Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:825:15)
    at iterateProperties (/Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:361:11)
    at markPropTypesAsDeclared (/Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:810:11)
    at MemberExpression (/Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:1027:13)
    at listeners.(anonymous function).forEach.listener (/Users/mac/dev/hitask-web/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/mac/dev/hitask-web/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/mac/dev/hitask-web/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/mac/dev/hitask-web/node_modules/eslint/lib/util/node-event-generator.js:280:22)

With v7.4.0 everything is ok

[ljharb]

@AlexMarvelo any chance you could help narrow that down to which file/code is causing the error? One trick is to temporarily edit /Users/mac/dev/hitask-web/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:656 and add console.log(context.getFilename()) above it (i might have the method name wrong)

[kevinzwhuang]

@ljharb This is reproducible in https://github.com/react-bootstrap/react-bootstrap too - occuring in https://github.com/react-bootstrap/react-bootstrap/blob/master/test/utils/bootstrapUtilsSpec.js

This is the output with console.log(context.getFilename()) patched directly into the copy in node_modules

/Users/kevinzwhuang/oss/react-bootstrap/src/ButtonGroup.js
/Users/kevinzwhuang/oss/react-bootstrap/src/MenuItem.js
/Users/kevinzwhuang/oss/react-bootstrap/src/Nav.js
/Users/kevinzwhuang/oss/react-bootstrap/src/Navbar.js
/Users/kevinzwhuang/oss/react-bootstrap/src/TabContainer.js
/Users/kevinzwhuang/oss/react-bootstrap/test/FormControlStaticSpec.js
/Users/kevinzwhuang/oss/react-bootstrap/test/FormGroupSpec.js
/Users/kevinzwhuang/oss/react-bootstrap/test/OverlayTriggerSpec.js
/Users/kevinzwhuang/oss/react-bootstrap/test/utils/bootstrapUtilsSpec.js
Cannot read property 'properties' of undefined
TypeError: Cannot read property 'properties' of undefined
    at markPropTypesAsUsed (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:657:38)
    at iterateProperties (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:826:15)
    at iterateProperties (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:361:11)
    at markPropTypesAsDeclared (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:811:11)
    at markPropTypesAsDeclared (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:839:13)
    at MemberExpression (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint-plugin-react/lib/rules/no-unused-prop-types.js:1028:13)
    at listeners.(anonymous function).forEach.listener (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (native)
    at Object.emit (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/kevinzwhuang/oss/react-bootstrap/node_modules/eslint/lib/util/node-event-generator.js:280:22)
(node:58141) DeprecationWarning: [eslint] The 'ecmaFeatures' config file property is deprecated, and has no effect. (found in /Users/kevinzwhuang/oss/react-bootstrap/.eslintrc)

I dug a little deeper and reverted https://github.com/yannickcr/eslint-plugin-react/pull/1507 locally, and it looks like #1507 is causing this crash. Not exactly sure why yet, still investigating

[ljharb]

Can you share the contents of bootstrapUtilsSpec.js? I'd rather roll forward with a fix than revert #1507.

[kevinzwhuang]

I agree @ljharb, I opened a PR (#1600) to hopefully resolve this without having to revert.

Re: contents of bootstrapUtilsSpec.js
This is an example of the breaking code:
https://github.com/react-bootstrap/react-bootstrap/blob/e41e041709045db657ac02c46fa4ff2df4e339a3/test/utils/bootstrapUtilsSpec.js#L84

    it('should not override other propTypes', () => {
      const propTypes = { other() {} };
      const Component = () => null;
      Component.propTypes = propTypes;
      bsStyles(['minimal', 'boss', 'plaid'])(Component);


      expect(Component.propTypes).to.exist;
      expect(Component.propTypes.other).to.exist;
    });

Where const propTypes = { other() {} }; and Component.propTypes = propTypes; is causing the crash

[ljharb]

ah, perhaps the concise method? If you change other() {} to other: function () {} or other: () => {}, does it avoid the crash?

[kevinzwhuang]

@ljharb Nope, same crash.

the test I wrote here uses an arrow function instead (https://github.com/yannickcr/eslint-plugin-react/pull/1600/files#diff-9dbe8e4f339ea9d6faa56b31c38e71bbR2451)

• I also just tested it out with the function keywork, also crashes.

[alxmiron]

@ljharb I found an old file, where () => {} was used as a prop type, instead of any. That was a reason of the problem for me