React-router: Error for Uncaught Error: Element 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

Created on 11 Mar 2017  路  23Comments  路  Source: ReactTraining/react-router

After update Followed the guides for connected router and react-redux-router

Getting following error

Uncaught Error: Element 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.
at invariant (invariant.js:44)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:77)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at mountComponentIntoNode (ReactMount.js:104)
at ReactReconcileTransaction.perform (Transaction.js:140)

Most helpful comment

npm install react-router-redux@next

All 23 comments

Yes I got the same error. It is because when you install "react-router-redux", we install this one : https://github.com/reactjs/react-router-redux and not the new library...

How to get the new one is the question !

npm install react-router-redux@next

This is not working.
The module is empty... There is only a "package.json" and "README.md" file in the package...

Can you help us ? @timdorr

Yeah, there was a bad publish. I'll get a 5.0.0-alpha.2 out shortly.

5.0.0-alpha.2 is up on the next tag: npm install react-router-redux@next Sorry about that!

Thanks !

This kept me awake for 3 hours, last night. Thank you!
I really appreciate the effort you put in and that you give your knowledge away for free, so others can build, create, and be great. You should feel really good that the software you build, in some cases, enables people to put food on the table.

This issue either still exists or returned in 5.0.0-alpha-4.

Yeah. Also having this issue. Really hindering me from continuing work :/

@iDuuck As far as the tags are concerned, you can go ahead and try to install 5.0.0-alpha.2 instead of next until everything works out, so you can continue work.

By the time you'll be done with your work, I'm sure this will move to the stable version.

Tried installing it on my local machine and install works fine

screen shot 2017-04-06 at 11 49 16

Do you have any code to show? If everything is ok and you installed 5.0.0-alpha.2, the problem might be somewhere else. Here are the dependencies of a project of mine, working flawlessly with this version of the library: https://github.com/opreaadrian/workee.fit/blob/master/package.json

Not working with Latest Version :(

Could you set up a bare project that replicates this issue. I moved on and it worked for me afterwards. Would be glad to help out.

Still broken in latest

It's not on latest, it's on next.

I still keep getting this error and don't know what to do. Tried <form> and <Form> still same. Please help:
This is my AzForm.js saved at: "./components/testComponent"

import React from 'react'
import { Provider } from 'react-redux'
//import { createStore } from 'redux'  //NOT sure whether I need it, but I still get the same error
import { reduxForm } from 'redux-form'

const SignInForm = props => {
    return (
      <form>
      </form>
    );
};

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SignInForm)

and this is an extract from index.js

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Image } from 'react-native';
import { SignInForm } from "./components/AzForm";

export class HomeScreen extends Component {
  render() {
    return (
      <SignInForm />
    );
  }
}

rn-element-type-invalid-err

FWIW, I was getting this error when my import was from react-router rather than react-router-dom, which I guess I was just used to from previous versions?

So instead of

import { Link } from 'react-router';

it should be

import { Link } from 'react-router-dom';

or I suppose for react-native:

import { Link } from 'react-router-native';

@sbauch thanks! some error from the Link

@sbauch's answer worked for me as well鈥攁s I've been upgrading several apps from v2/3 to v4 a good rule of thumb seems to be anything that's called as a component probably needs to be imported from 'react-router-dom'

Im still gaving the issue with
"react-router-redux": "^5.0.0-alpha.9",

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

I am also having this problem with 5.0.0-alpha.9. When I use PyCharm to look at the imported object's definition, it takes me to:

exports.routerMiddleware = exports.routerActions = exports.goForward = exports.goBack = exports.go = exports.replace = exports.push = exports.CALL_HISTORY_METHOD = exports.routerReducer = exports.LOCATION_CHANGE = exports.createMatchSelector = exports.getLocation = exports.ConnectedRouter = undefined;

setting it as undefined, which seems to be the problem.

Hello ! I had the same error and the transition from version 4 to version 5 alpha 9 of react-router-redux solved my problem.

BUT I HAVE ANOTHER PROBLEM: Now, my do not work anymore (The url changes but the redirection is not done)

import { Link, withRouter } from 'react-router-dom';

"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",

Guys maybe it should be time to warn about this on the README here

Was this page helpful?
0 / 5 - 0 ratings