TypeScript definitions are out of date

[codeaid]

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?
Latest version of react-dropzone at the time of submitting this issue is 4.1.3, however the latest available version of @types/react-dropzone is 3.13.1 and it's already missing at least one property definition.

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

1. Add a Dropzone component to your page

   import * as Dropzone from 'react-dropzone';

2. Try to define the disabledClassName

   <Dropzone
       disabledClassName="my-disabled-classname"
   >

3. Receive a transpilation error:

   error TS2339: Property 'disabledClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Dropzone> & Readonly<{ children?: ReactNode; }> & ...'.
   

Same seems to be happening to acceptClassName.

What is the expected behavior?
Being able to use all properties available in the current version.

[benbayard]

A note: in TS you should not import React-dropzone with * as imports. This module is exported as common JS in its source. You should use import Dropzone = require('react-dropzone);

[okonet]

I have no idea who made those type definitions. They aren't supported by this repository. So you might want to file this bug at the appropriate repository. Ideally, please submit a PR with the fix.

[okonet]

Reopening till the appropriate PR is merged.

[rxmarbles]

@okonet should we pin this then since we have no idea when that PR is submitted/merged? or do you know which it is from that repo?

[codeaid]

My updated TypeScript definitions were merged into DefinitelyTyped almost two weeks ago as you can see in the pull request referenced above. They're currently live on https://www.npmjs.com/package/@types/react-dropzone.

This issue can be closed as resolved.

[rxmarbles]

@codeaid thanks for the update! will close

[ashok-sc]

This seems related. When I import Dropzone as stated above:
@benbayard :

A note: in TS you should not import React-dropzone with * as imports. This module is exported as common JS in its source. You should use import Dropzone = require('react-dropzone);

I get the following error in at runtime:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Changing the import to import Dropzone from 'react-dropzone'; fixes the runtime error, but now I get the compile error:

TS1192: Module '"/Users/ashokraju/src/sc/caas-app/node_modules/@types/react-dropzone/index"' has no default export.

What's happening here?

[FlayaN]

@ashok-sc It seems like the typescript-definition is still wrong.

I got it to work using:

"@types/react-dropzone": "4.1.0",
"react-dropzone": "4.1.3

Either you can change typing locally
row 51 in index.d.ts
export = Dropzone; => export default Dropzone;
But that will get overwritten of course..

So I instead added this when I import the module:

import * as Dropzone2 from "react-dropzone";
const Dropzone: any = Dropzone2; // @types/react-dropzone 4.1.0 exports wrong

And this works both in typescript and runtime..

[benbayard]

This module is not exported in a way where you actually have es6 exports. You need to use a commonjs import. The typescript types are correct

[ashok-sc]

Thanks @FlayaN ! Will give that a shot.

[michaelsync]

I tried what @FlayaN suggested but it doesn't work.

Packages

- "@types/react-dropzone": "^4.1.0",     ### in DEV
- "react-dropzone": "^4.2.3",

Code

import * as Dropzone2 from "react-dropzone";
const Dropzone: any = Dropzone2;

render() {
   return (
       <div >
         <Dropzone>
         </Dropzone>
       </div>
       );
 }

`
It gave this error "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

[promgamer]

Same as @michaelsync here... Did someone managed to solve this?

Also, tried to import

import Dropzone = require('react-dropzone');

but I get ReferenceError: Dropzone is not defined

[benbayard]

@promgamer what is your tsconfig?

[promgamer]

@benbayard

{  "compilerOptions": {    "outDir": "build/dist",    "module": "esnext",    "target": "es5",    "lib": ["es6", "dom"],    "sourceMap": true,    "allowJs": true,    "jsx": "react",    "moduleResolution": "node",    "rootDir": "src",    "forceConsistentCasingInFileNames": true,    "noImplicitReturns": true,    "noImplicitThis": true,    "noImplicitAny": true,    "strictNullChecks": true,    "suppressImplicitAnyIndexErrors": true,    "noUnusedLocals": true  },  "exclude": [    "node_modules",    "build",    "scripts",    "acceptance-tests",    "webpack",    "jest",    "src/setupTests.ts"  ]}

[benbayard]

esnext does not support commonjs imports, unfortunately. If you're not doing webpack code splitting, I would recommend instead have module be node.

[michaelsync]

@benbayard

I am using esnext (module) and es6 (target)

I downgraded the packages as below. and those versions work for me.

react-dropzone": "4.1.3",

DEV -- 
"@types/react-dropzone": "^4.1.0",

[promgamer]

@michaelsync tried that already, doesn't work here...

[promgamer]

For those wondering, I've found in typescript github that this behaviour was a bug that was fixed on v2.6! 😄 My problem was that I was using v2.5.3