Cannot Use In Typescript App

[kevineaton]

I was trying to use this library in a create-react-app application using the Typescript scripts. However, When I insert the component as such:

`

Drop the file you would like to upload here

              </FileDrop>

`

I get the following error: JSX element class does not support attributes because it does not have a 'props' property.ts(2607) (JSX attribute) onDrop: (files: any, event: any) => void

[sarink]

Hey @kevineaton, I've never seen this error, can you paste some more code? I think it's something specific with your setup. Have you tried using the demo code?

[kevineaton]

Hello! Unfortunately I dropped the library and used Dropzone. It likely has something to do with the Tyepscript typings, perhaps being out of sync. I can try to recreate it over the weekend.

[thunderkid]

I'm getting the same problem.

I've tried various forms of the import statement, eg import { FileDrop } ... import * as FileDrop ... etc.

but can't get it to work. I think it's related to the type of module imports being used. eg in your demo code your tsconfig.json has allowSyntheticDefaultImports: true. My own tsconfig.json is this:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "core/*": ["../../common/ts/*"],
            "createdByBuild/*": ["out/createdByBuild/*"]
        },
        "outDir": "out/built/",
        "module": "esnext",
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "es5",
            "es2015",
            "es2016"
        ],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "../..",
        "noEmitOnError": true,
        "noImplicitReturns": false,
        "noImplicitThis": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "strictPropertyInitialization": true,
        "noUnusedLocals": false,
        "experimentalDecorators": true
    }
}

I've actually solved the problem in my own situation simply by cutting and pasting your FileDrop class into my own codebase rather than trying to import from the library at all. It's now working fine for me, but this obviously isn't the right long-term solution.

[sarink]

@kevineaton @thunderkid would #42 fix this? 0.2.8 has been released, if you wouldn't mind giving it a shot!

[jsargeim]

@sarink so I have 0.2.8 and typescript is giving me an error. I'm using a program that will compile with nominal typescript errors, so it is working - but has an error.

import * as React from 'react';

import FileDrop from 'react-file-drop';

export class Demo extends React.Component {

  handleDrop = (files: FileList, event: React.DragEvent<HTMLDivElement>) => {
    console.log('handleDrop!', files, event);
  }

  render() {
    const styles = { border: '1px solid black', width: 600, color: 'black', padding: 20 };
    return (
      <div id="react-file-drop-demo" style={styles}>
        <FileDrop onDrop={this.handleDrop}>
          Drop some files here!
        </FileDrop>
      </div>
    );
  }
}

[sarink]

Is anyone encountering this issue willing to push up a demo repo where it's reproducible? I'll play around with it

[jsargeim]

@sarink I'll do it tonight, so in about 5-6 hours.

[thunderkid]

@sarink: I've tried 0.2.8 with the variants:

import FileDrop from  'react-file-drop'; 
import { FileDrop } from  'react-file-drop'; 
import * as FileDrop from  'react-file-drop'; 

and the same tsconfig.json I showed above. All give typescript compilation errors.

[jsargeim]

@sarink so i can't reproduce the error, but this error is now popping up. I'm still learning typescript, so feel free to correct any mistakes I might've made. Here's the repo.

https://github.com/jsargeim/react-file-drop-demo

  Types of parameters 'files' and 'files' are incompatible.
    Type 'FileList | null' is not assignable to type 'FileList'.
      Type 'null' is not assignable to type 'FileList'.ts(2322)

[ezekg]

I was still having this issue with react-file-drop v3 and Parcel v2, default settings.

After digging around, it's because this library (in the compiled FileDrop.d.ts) declares typings from @types/prop-types, @types/react, and @types/react-dom, but you've defined these as dev dependencies, so the typings end up being invalid because they're not installed. To resolve this, I added those packages as dev dependencies to my own project. Perhaps these should be declared as dependencies, not dev dependencies.

yarn add @types/prop-types @types/react @types/react-dom --dev