Button hints using antd framework in vscode

All we need is an easy explanation of the problem, so here it is.

I’m using Button and Input of antd in vscode. But It shows error on Button and I want to know why.

I have tried Input, and it shows no error. Which is showed in the picture.

import React from 'react';
import styles from './index.css';
import router from 'umi/router';
import {Input, Button} from 'antd';

export default function() {
  const handleClick=()=>{
    router.push('/homepage/');
  }
  return (
    <div className={styles.normal}>
      <div className={styles.welcome} />
      <h1 className={styles.title}>login</h1>
      <ul className={styles.list}>
        <li><label>username:</label><Input className={styles.input} placeholder="username"/></li>
        <li><label>password:</label><Input className={styles.input} placeholder="password"/></li>
        <li>
          <Button type="primary" shape="round" onClick={handleClick}>login</Button>
        </li>
      </ul>
    </div>
  );
}

The actual output shows:

<--language:lang-none-->
"message": "Type '{ children: string; type: \"primary\"; shape: \"round\"; onClick: () => void; }' is missing the following properties from type 'Pick<Pick<(Readonly<AnchorButtonProps> & Readonly<{ children?: ReactNode; }>) | (Readonly<NativeButtonProps> & Readonly<{ children?: ReactNode; }>), \"defaultChecked\" | \"defaultValue\" | ... 257 more ... | \"block\"> & Pick<...> & Pick<...>, \"defaultChecked\" | ... 256 more ... | \"shape\">': defaultChecked, defaultValue, suppressContentEditableWarning, suppressHydrationWarning, and 250 more."

plus, I want to ask how to use static resource? The sample project just use the css background url way to show pictures.

enter image description here

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Hello I have updated @types/react as 16.8.11 in my package.json. This solved my problem.

Method 2

Downgrade the “@types/react”: “^16.8.8” will solve it

Method 3

This issue was fixed by antd 3 days ago. Just update your antd to version 3.16.3 and you will be fine.

Execute: npm i [email protected] --save or yarn [email protected]

If you want more details, you can find in this issue

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply