react-dropzone: Element type is invalid error

I still have the same problem. But importing like this works:

let Dropzone = require("react-dropzone")
if ("default" in Dropzone) {
    Dropzone = Dropzone.default
}

import * as Dropzone from 'react-dropzone';

worked for me

@yebrahim I’m using react-scripts-ts and import Dropzone from 'react-dropzone'; works without any issues (make sure you have the allowSyntheticDefaultImports flag enabled in tsconfig.json).

Typings are now baked in this package, in case you use the ones from @types.

I digged a bit deeper, for me the problem was that I used ts-jest without "allowSyntheticDefaultImports": true, in the tsconfig.json - that doesn’t seem to work with react-dropzone. TL;DR: Add `“allowSyntheticDefaultImports”: true to the tsconfig when using ts-jest 😃

For some reason, this worked with the normal webpack build, but not when using jest:

public render() { return <div> <Dropzone> Click here or drop ableton projects </Dropzone> </div>; }

was compiled to: this.__proto__.render.toString() "render() { return React.createElement("div", null, React.createElement(react_dropzone_1.default, null, "Click here or drop ableton projects")); { } }"

the extra [default] breaks it in this case, as this is undefined. I’ll check my build config once more, but if someone stumbles over this issue it might be helpful.

Same issue for me. I can fix it by adding "allowSyntheticDefaultImports": true but then that breaks other things in my app.

So for now this is my fix:

/* tslint:disable-next-line */
let Dropzone = require('react-dropzone')
if ('default' in Dropzone) {
  Dropzone = Dropzone.default
}

@SourceCipher @kildem @okonet I fixed this issue by disabling module transformation by the Babel. I.e. in .babelrc:

    "presets": [
        [
            "env",
            {
                "modules": false
                ....
            }
        ]
]

I have the same

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

js import Dropzone from "react-dropzone";

This problem occurs immediately after I started using code splitting with Webpack. It affected a few other libraries such as redux-saga as well.

as @mojadev said, using <Dropzone.default /> solves it (same thing with redux-saga)

I still have the same problem. But importing like this works:

let Dropzone = require("react-dropzone")
if ("default" in Dropzone) {
    Dropzone = Dropzone.default
}

only this workaround worked for me. Im using ts-jest. I had “Element type is invalid: expected a string (for built-in components)” problem

+1. If you’re, like me, using create-react-app with Typescript, there’s no way I can find around this problem. I can’t even try any of the solutions above. 😦

After trying several described methods, I ended up using:

import * as Dropzone from 'react-dropzone/dist/index';

@gtwilliams03 No, it isn’t a good fix form me. I have client and server rendering. As temp fix I build a local implementation of drag and drop

I have the same as @mojadev said, using <Dropzone.default /> solved the problem, but only on client side, on server rendering it throw error: 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, or you might have mixed up default and named imports.