Uncaught Error: Element type is invalid

[dldugan14]

While using this with redux and react router 4 and fallowing the usage directions it immediately throws this error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at invariant (invariant.js:42) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:72) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:364) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255) at Object.mountComponent (ReactReconciler.js:43) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255) at Object.mountComponent (ReactReconciler.js:43) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255) at Object.mountComponent (ReactReconciler.js:43) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255) at Object.mountComponent (ReactReconciler.js:43) at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368) at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)

I cannot for the life of me figure out why. I have tried the suggested versions of all the dependencies as well as their respective @latest

The code looks something like this:

import { Provider as AlertProvider } from "react-alert"; import AlertTemplate from "react-alert-template-basic";

const options = { position: "bottom center", timeout: 5000, offset: "30px", transition: "scale" };

//more routes here

[dldugan14]

sorry something went wrong with the code block here is

`import { Provider as AlertProvider } from "react-alert"; import AlertTemplate from "react-alert-template-basic";

const options = { position: "bottom center", timeout: 5000, offset: "30px", transition: "scale" };

type RootType = { store: {}, history: {} };

export default function Root({ store, history }) { return (

//more routes

`

[travis]

Any ideas on this? I'm seeing the same thing trying to render a component using react-alert in storyshots. Can provide code sample if that'd be helpful!

[lewjc]

@travis Did you ever resolve this? having the same issue.

[daviskoh]

Not sure if this is helpful, but also using react-router-dom. Had this error when I accidentally imported Provider instead of { Provider }.

After fixing I ran into an error Unexpected Fiber popped & cannot set property '_currentValue' of undefined which were resolved by making sure both react & react-dom versions were >=16.3.1

[shorif2000]

@travis i am getting this as well. i am using redux and router heres code https://codesandbox.io/s/nnwlljw9q0

[jacobsowles]

This feels more like a redux issue than a react-alert issue. I removed all react-alert code from the codesandbox link @travis posted, and I'm still getting the Element Type Invalid error.

[jacobsowles]

Ah, here's the fix for your code, @travis:

In App.js, change this:

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(App);

to this:

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(App)
); // note that withRouter wraps the whole thing

...and update your mapStateToProps from this:

function mapStateToProps(state) {
  return state;
}

to this:

function mapStateToProps(state) {
  return { ...state };
}