react-dropzone: @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.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 4
  • Comments: 20 (2 by maintainers)

Most upvoted comments

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.

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

Does this happen after v16.9.46? Because if it doesn’t, I’m not sure how we can fix it from our side.

Dosen’t happen with `“@types/react”: “^16.9.53”,