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

[andrewbranch]

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.