Typescript runtime issues

When I embed this using in an ES6 JSX file, this works fine. I am using Webpack 1 and Typescript.

However, using TypeScript, I get this error (at runtime):

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Test`.

This is my Test component:

import * as React from 'react';
import { render } from 'react-dom';
import Dropzone from 'react-dropzone';
interface TestProps {

}
export default class Test extends React.Component<TestProps, {}> {

  render(){
    return(
       <Dropzone onDrop={() => console.log("drop")}>
              <div>Try dropping some files here, or click to select files to upload.</div>
        </Dropzone>
    )
  }

[goloveychuk]

@dupski solution:

1. make all imports import * as Dropzone from 'react-dropzone/dist/index';
2. add react-dropzone.d.ts react-dropzone.txt

This is because https://github.com/react-dropzone/react-dropzone/blob/master/package.json#L4-L5 webpack using module, typescript main. In first file we have export default, on second - module.exports = {} Why typescript using main? I guess because of https://github.com/goloveychuk/ts-jest/blob/master/src/utils.ts#L208-L213 Not 100% sure.

[YGKtech]

I’m facing this issue too, the problem has not been resolved and this issue should be reopened.

Currently the only way I’ve been able to use this in typescript is to not install the @types definiton, change my tsconfig.json to allow implicit any statements, then import it as import * as Dropzone from 'react-dropzone'; and reference the component as <Dropzone.default>

This is a lot of hassle to go through for a single component, and the workaround isn’t documented anywhere.