JS checking makes JSX props optional when inferred through JSX.LibraryManagedAttributes

Bug Report

Reported as part of #45140, moving to its own issue.

🔎 Search Terms

js jsx props optional

🕗 Version & Regression Information

• This is the behavior in every version I tried

⏯ Playground Link

Playground link with relevant code

💻 Code

// @Filename: index.jsx

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

function MyComponent({ prop1, prop2, prop3 }) {
  return (
    <div>
      <span>{prop1}</span>
      <span>{prop2}</span>
    </div>
  );
}

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.bool,
  prop3: PropTypes.shape({
    p1: PropTypes.string
  })
};

// All props show as optional in quick info / completions, and there's no error for missing prop1.
// The type of the JSX props is inferred from `MyComponent.propTypes` via JSX.LibraryManagedAttributes,
// but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.
(<MyComponent prop2 />)

🙁 Actual behavior

All props show as optional in quick info / completions, and there's no error for missing prop1. The type of the JSX props is inferred from MyComponent.propTypes via JSX.LibraryManagedAttributes, but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.

🙂 Expected behavior

The prop1 JSX prop shows as required and an error is shown on the JSX element since it’s missing.

Comienza con el TypeScript Playground enlazado y el ejemplo index.jsx, centrándote en JSX.LibraryManagedAttributes y la asignación de propTypes. Compara la comprobación de JavaScript con el mismo código en TypeScript para rastrear por qué se pierde la obligatoriedad. Se considera terminado cuando prop1 se muestra como obligatorio y produce un error por una prop ausente.