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

Start with the provided TypeScript Playground link and the JSX example where produces diagnostic 2322. Trace how the compiler reports props for a zero-parameter React component, then add a focused regression case if the repository’s existing diagnostic tests cover this path. Done means the diagnostic clearly says that Foo takes no parameters instead of foregrounding the complex type and IntrinsicAttributes.