Confusing error when a zero-parameter React component is given a parameter

Bug Report

When you try to pass a param using JSX to a component that doesn't take any params, you get a confusing message about IntrinsicAttributes. When you pass in a really complicated type, this error can easily get lost in the noise from the type itself.

Context: tweet in response to @mjbvz's request for confusing error messages.

🔎 Search Terms

• IntrinsicAttributes
• does not exist on type IntrinsicAttributes
• 2322

maybe related to #33476 and #35253

🕗 Version & Regression Information

Version 4.1.2 (full details below)

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": 2,
    "target": "ES2017",
    "jsx": "React",
    "module": "ESNext"
  }
}

⏯ Playground Link

Playground Link: Provided

💻 Code

import React from 'react';

function Foo() {
    return null;
}

const val = {my: {complex: {nested: {structure: {with_: { some: ['arrays']}}}}}};

function MyStory() {
    return <Foo param={val} />;
    //          ~~~~~
    // Type '{ param: { my: { complex: { nested: { structure: { with_: { some: string[]; }; }; }; }; }; }; }' is not assignable to type 'IntrinsicAttributes'.
    //   Property 'param' does not exist on type 'IntrinsicAttributes'. (2322)
}

🙁 Actual behavior

It's not clear that the error is that a parameter is being incorrectly passed via JSX.

Here's the example from the Tweet. Note how large the type is compared to the real error:

🙂 Expected behavior

A better error might be:

Foo takes no parameters

Commencez par le lien TypeScript Playground fourni et l’exemple JSX dans lequel produit le diagnostic 2322. Suivez la manière dont le compilateur signale les props d’un composant React sans paramètre, puis ajoutez un cas de régression ciblé si les tests de diagnostic existants du dépôt couvrent ce chemin. C’est terminé lorsque le diagnostic indique clairement que Foo n’accepte aucun paramètre, au lieu de mettre en avant le type complexe et IntrinsicAttributes.