@types/react@16.9.46: Types of property 'style' are incompatible

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?

Typescript errors out when building the react-dropzone example, using the latest version of @types/react

If the current behavior is a bug, please provide the steps to reproduce.

1. Upgrade @types/react to 16.9.46
2. Use react-dropzone 11.0.3
3. Run example code:

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}

Typescript fails with the following errors:

string | number | string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 249 more ...; onTransitionEndCapture?: ((event: TransitionEvent<...>) => void) | undefined; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ children: Element[]; refKey?: string | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 249 more ...; onTransitionEndCapture?: ((event: TransitionEvent<...>) => void) | undefined; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type 'import("/Users/ldiqual/Siteline/siteline/node_modules/@types/react/index").CSSProperties | undefined' is not assignable to type 'React.CSSProperties | undefined'.
        Type 'import("/Users/ldiqual/Siteline/siteline/node_modules/@types/react/index").CSSProperties' is not assignable to type 'React.CSSProperties'.
          Types of property 'appearance' are incompatible.
            Type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "button-bevel" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "meter" | "progress-bar" | "push-button" | ... 7 more ... | undefined' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "meter" | "progress-bar" | "push-button" | "radio" | ... 6 more ... | undefined'.
              Type '"button-bevel"' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "checkbox" | "listbox" | "menulist" | "menulist-button" | "meter" | "progress-bar" | "push-button" | "radio" | ... 6 more ... | undefined'.

This happens for @types/react v16.9.44 to v16.9.46. Does not affect v16.9.43.

What is the expected behavior?

Typescript successfully compiles the example code.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

[eric-burel]

For lost googlers: this usually means you have multiple occurrence of @types/react with incompatible versions, either in your app or dependencies such as react-dropzone or others. You can add Yarn resolutions to fix this issue:

  "resolutions": {
    "@types/react": "^17.0.14",
    "@types/react-dom": "^17.0.9"
  }

Note: this seems problematic to me that those package comes with this dependency at first, but this seems to happen a lot.

[rolandjitsu]

Closing this as it doesn’t happen with the latest versions of typings.