[Bug]: cannot recognize propTypes as Class static props using @babel/[email protected]

[lyz810]

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/eslint-parser

Input code

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

class A extends React.PureComponent {
  static propTypes = {
    test: PropTypes.string.isRequired,
  };

  render() {
    const { test } = this.props;
    return (<div>{test}</div>);
  }
}

export default A;

Configuration file name

babel.config.js

Configuration

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-class-properties',
  ],
 env: {
// ...
  development: {
      presets: [
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react',
      ],
    },
 },
};

Current and expected behavior

eslint throw an error
error 'test' is missing in props validation react/prop-types

It should be no error, because test props defined in propTypes

It will pass if I define propTypes as follow:

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

class A extends React.PureComponent {
  // static propTypes = {
  //   test: PropTypes.string.isRequired,
  // };

  render() {
    const { test } = this.props;
    return (<div>{test}</div>);
  }
}

A.propTypes = {
  test: PropTypes.string.isRequired,
};

export default A;

Environment

System:
OS: macOS 11.6
Binaries:
Node: 16.12.0 - /usr/local/bin/node
npm: 8.1.0 - /usr/local/bin/npm
npmPackages:
@babel/cli: ^7.16.0 => 7.16.0
@babel/core: ^7.16.0 => 7.16.0
@babel/eslint-parser: ^7.16.0 => 7.16.0
@babel/plugin-proposal-decorators: ^7.16.0 => 7.16.0
@babel/plugin-transform-runtime: ^7.16.0 => 7.16.0
@babel/preset-env: ^7.16.0 => 7.16.0
@babel/preset-react: ^7.16.0 => 7.16.0
@babel/preset-typescript: ^7.16.0 => 7.16.0
@babel/runtime: ^7.16.0 => 7.16.0
babel-jest: ^27.3.1 => 27.3.1
babel-preset-const-enum: ^1.0.0 => 1.0.0
eslint: ^8.1.0 => 8.1.0
jest: ^27.3.1 => 27.3.1

Possible solution

I don't know this bug belongs to eslint or @babel/eslint-parser，but I just upgrade @babel/eslint-parser, and do nothing with eslint config or update eslint npm packages.

Additional context

After update @babel/eslint-parser from v7.15.8 to v7.16.0
Eslint rule react/prop-types failed
I tried to install @babel/[email protected]，eslint rules passed

[babel-bot]

Hey @lyz810! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[nicolo-ribaudo]

The problem is that the react/prop-types rule doesn't support ESLint 8 yet: jsx-eslint/eslint-plugin-react#3055.

I suggest downgrading to ESLint 7 (you don't need to also downgrade @babel/eslint-parser, since it automatically detects the ESLint version and produces a parser result with the correct information).