Element type is invalid error

[SourceCipher]

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?

It seems like the plugin not getting imported following the installation guidance
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
and
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

What I have tried to fix the problem?

I have seen various possible ways to fix it but none of them worked. For example importing like
import { Dropzone } from 'react-dropzone'
instead of
import Dropzone from 'react-dropzone'

But that will not solve the problem.
The only way I made it work is by downgrading to version 4.1.3 as someone mentioned before, but thats no use as it has a major bug which crashes the browser as been reported in #549

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

react-dropzone 4.2.5
Chrome Version 63.0.3239.132
npm 5.6.0
node 6.12.0

[okonet]

I’m not sure what can cause this since we didn’t change anything on how the component is being exported or built. Can someone investigate that?

[okonet]

Yeah we did here #510

[SourceCipher]

@okonet I viewed the pull you linked but I have no idea how do I configure to avoid this error?

[SourceCipher]

Calling component with <Dropzone.default></Dropzone.default> instead of <Dropzone></Dropzone> solved my problem, but I am not confident about this tho

[okonet]

It’s hard to tell without looking at your code but looks like transpilation issue on your side with your Babel config. Please post how your babelrc looks like and how you import dropzone in your code.

[gdepina]

@okonet Hi all, thank u for collaborating on this fantastic component, i have a similar issue my app is isomorphic and when i try to render from server i have same issue because node does not interprets imports, maybe was a problem with building?.
I will investigate more to give a more accurate answer.

[okonet]

I think the problem is that it doesn’t get transpiled properly. You have to use umd build. Might be a problem with project’s webpack setup.

[mojadev]

import * as Dropzone from 'react-dropzone';

worked for me

[rxmarbles]

I believe this was fixed when we fixed the webpack builds. Though I would like to see if any others are coming across this issue still.

[mojadev]

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.

[niksosf]

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)

[sedge]

This issue seems to have broken dependant packages, like react-dropzone-s3-uploader.

[kildem]

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.

[gtwilliams03]

Not sure if this helps track this down, but if I run local, I need to use <Dropzone.default /> to avoid the above React.createElement: type is invalid error.

If I deploy to production (i.e., webpack), I need to render only <Dropzone /> to avoid the error.

@mojadev @kildem Maybe this is a temporary fix for you?

[kildem]

@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

[gtwilliams03]

@kildem Not a good fix for me either, FWIW. I need to remember to swap <Dropzone.default /> and <Dropzone /> every time I deploy...

[rajdee]

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

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

[MastroLindus]

I have the same issue using meteor and typescript.
I didn't find a proper solution yet, but the previous version that didn't use default export used to work perfectly

[StaceC]

Same issue with Jest, Webpack, Electron and Typescript. Works fine in production, just Jest that seems to fail.

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.

Using import Dropzone from 'react-dropzone';

Changing to * and .default doesn't seem to help either.

Will keep searching though - very useful package.

[sarfata]

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
}

[dmikheev]

For me it was webpack's ModuleConcatenationPlugin that apparently removed __esModule definition in react-dropzone files in development mode.
But I decided to turn off babel module transformation as @rajdee suggested, because it's better for webpack's tree shaking and to continue using concatenation plugin.
Also as I'm using TypeScript I had to change it's module to "ES6", moduleResolution to "Node", disable esModuleInterop and enable allowSyntheticDefaultImports.

[jpetitcolas]

After trying several described methods, I ended up using:

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

[yebrahim]

+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. :(

[okonet]

Does anyone know what the root cause it and can PR the fix?

[rolandjitsu]

@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.

[yebrahim]

Thanks @rolandjitsu, that did work.

[dmt0]

For future googlers: that's what fixed it for me:
webpack-contrib/webpack-serve#208 (comment)

[hallsbyra]

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

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

[Kazimirkas]

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

[mfaheemakhtar]

I was getting the same error but turns out it was not Dropzone.

I'm using an old version of reactstrap and was using Spinner in the children.

<section>
  <div>Something</div>
  <Spinner />
  <div>Something more</div>
</section>

The Spinner component is undefined in the old version because has been released in a newer version.

Thought it will be useful since it is the only result in the Google.

[stormynight9]

Having the same issue here using Astro deployed on Netlify