Error: 'is missing in props validation' after update of ESLint to v5.4.0

[Juuro]

By now we validated our props like this:

class HelloEs6 extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
HelloEs6.propTypes = {
  name: PropTypes.string.isRequired,
};

But after an update of ESLint from v4.19.1 to v5.4.0 we always get the 'is missing in props validation' error.

If we put the validation inside of the class it works perfectly like this:

class HelloEs6 extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

  propTypes = {
    name: PropTypes.string.isRequired,
  };
}

Why is that the case? We couldn't find anything in the changelog according to this.

[ljharb]

That's confusing; the class field example is actually wildly incorrect - propTypes needs to be static on the class, not an instance field.

We have almost your exact example in our test cases, so it seems like something else is going on. Can you share your full eslint config?

[Juuro]

Mh, I have this example from your rules documentation for prop-types: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md propTypes works even if it's not defined as static. Maybe that is not "nice code" but it doesn't seem to be the problem here.

Here is our ESLint configuration:

{
  "settings": {
    "react": {
      "version": "16.3.14"
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:security/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "jest",
    "security"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "parser": "babel-eslint",
  "globals": {
    "browser": true,
    "element": true,
    "by": true
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "jest/globals": true
  },
  "rules": {
    "no-await-in-loop": 2,
    "quotes": [2, "single"],
    "no-console": 2,
    "no-debugger": 2,
    "accessor-pairs": 2,
    "no-var": 2,
    "array-callback-return": 2,
    "no-template-curly-in-string": 2,
    "semi": [2, "always"],
    "complexity": ["error", { "max": 10 }],
    "no-trailing-spaces": 2,
    "dot-location": [2, "property"],
    "eol-last": 0,
    "eqeqeq": 2,
    "no-unused-vars": 0,
    "guard-for-in": 2,
    "dot-notation": 2,
    "curly": 2,
    "default-case": 2,
    "consistent-return": 2,
    "no-underscore-dangle": 0,
    "no-alert": 2,
    "no-caller": 2,
    "no-eval": 2,
    "no-extra-bind": 2,
    "no-else-return": 2,
    "no-extra-label": 2,
    "no-lone-blocks": 2,
    "no-implicit-coercion": 2,
    "no-param-reassign": 2,
    "no-implicit-globals": 2,
    "no-octal-escape": 2,
    "no-implied-eval": 2,
    "no-new-wrappers": 2,
    "no-useless-concat": 2,
    "no-useless-return": 2,
    "no-label-var": 2,
    "no-undefined": 2,
    "prefer-promise-reject-errors": 2,
    "no-invalid-this": 2,
    "no-proto": 2,
    "no-with": 2,
    "no-return-assign": 2,
    "no-script-url": 2,
    "no-self-compare": 2,
    "no-throw-literal": 2,
    "no-return-await": 2,
    "no-iterator": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-new-func": 2,
    "no-labels": 2,
    "global-require": 2,
    "handle-callback-err": 2,
    "no-mixed-requires": 2,
    "no-new-require": 2,
    "no-path-concat": 2,
    "no-sync": 2,
    "key-spacing": ["error", {"afterColon": true}],
    "jsx-quotes": ["error", "prefer-double"],
    "object-curly-spacing": ["error", "never"],
    "prefer-const": ["error", {"destructuring": "any", "ignoreReadBeforeAssign": false}],
    "prefer-destructuring": ["error", {"VariableDeclarator": {"array": false,"object": true}, "AssignmentExpression": {"array": true, "object": false}}, {"enforceForRenamedProperties": false}],
    "no-duplicate-imports": ["error", { "includeExports": true }],
    "arrow-parens": ["error", "as-needed"],
    "quote-props": ["error", "as-needed"],
    "keyword-spacing": ["error", {"before": true}]
  }
}

[ljharb]

React doesn't have a v16.3.14, btw, it only goes up to v16.3.2 before v16.4. However this, just like static get propTypes, is a red herring.

This should definitely work. cc @alexzherdev any ideas?

[alexzherdev]

Ok, I'm a little bit confused - is this issue only about the fact that propTypes works as a non-static class field? That should be easy to fix.
There also appears to be an issue with HelloEs6.propTypes = {} form not being handled correctly. If that's the case, I'd ask for the actual component's code that doesn't work (because the example from the docs does work at least according to the tests).

[Juuro]

Yes, it was the latter. But wie fixed it by ourselves. The problem was that we exported the class like

export const PersoenlicheDatenWithoutStore = PersoenlicheDaten;

After we changed this to

export {PersoenlicheDaten as PersoenlicheDatenWithoutStore};

It works like a charm.

I don't understand why the first version causes 'is missing in props validation' errors. But we wanted to update to the other syntax anyway.
Thank you for your help! If you have any idea why this error was caused I would be eager to lern something. :-)