React-router: Error with React Router v4 and Transition Group

[Bram-Zijp]

I keep getting this error when testing around with React Router v4 and both low and high level API of React Transition Group.

I'm using code examples provided here: https://reacttraining.com/react-router/web/example/animated-transitions.

warning.js?85a7:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Route`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Route`.

    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1",
    "react-transition-group": "^1.1.3",

[pshrmn]

This isn't a React Router issue, you just have a bad import. Put a console.log at the top of the file that is throwing the errors and log all of your component imports. The component that is an object instead of a function is where your problem is.

[Bram-Zijp]

@pshrmn
I put everything in a single file and all of it's containing components return functions in the log. Also I only used the code from the example

logs

This is the file content (the only js file in the project):

import React from 'react'
// resolved 1 error here:
// import ReactCSSTransitionGroup from 'react-transition-group'
import { ReactCSSTransitionGroup } from 'react-transition-group'
import { render } from 'react-dom'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect
} from 'react-router-dom'

/* you'll need this CSS somewhere
.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}
*/

const AnimationExample = () => (
    <Router>
        <Route
          render={({ location }) => (
              <div style={styles.fill}>
                  <Route
                    exact path="/" render={() => (
                        <Redirect to="/10/90/50" />
                )}
                  />

                  <ul style={styles.nav}>
                      <NavLink to="/10/90/50">Red</NavLink>
                      <NavLink to="/120/100/40">Green</NavLink>
                      <NavLink to="/200/100/40">Blue</NavLink>
                      <NavLink to="/310/100/50">Pink</NavLink>
                  </ul>

                  <div style={styles.content}>
                      <ReactCSSTransitionGroup
                        transitionName="fade"
                        transitionEnterTimeout={300}
                        transitionLeaveTimeout={300}
                      >
                          {/* no different than other usage of
                ReactCSSTransitionGroup, just make
                sure to pass `location` to `Route`
                so it can match the old location
                as it animates out
            */}
                          <Route
                            location={location}
                            key={location.key}
                            path="/:h/:s/:l"
                            component={HSL}
                          />
                      </ReactCSSTransitionGroup>
                  </div>
              </div>

        )}
        />
    </Router>
)

const NavLink = props => (
    <li style={styles.navItem}>
        <Link {...props} style={{ color: 'inherit' }} />
    </li>
)

const HSL = ({ match: { params } }) => (
    <div
      style={{
          ...styles.fill,
          ...styles.hsl,
          background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`,
      }}
    >hsl({params.h}, {params.s}%, {params.l}%)</div>
)

console.log(AnimationExample)
console.log(NavLink)
console.log(HSL)

const styles = {}

styles.fill = {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
}

styles.content = {
    ...styles.fill,
    top: '40px',
    textAlign: 'center',
}

styles.nav = {
    padding: 0,
    margin: 0,
    position: 'absolute',
    top: 0,
    height: '40px',
    width: '100%',
    display: 'flex',
}

styles.navItem = {
    textAlign: 'center',
    flex: 1,
    listStyleType: 'none',
    padding: '10px',
}

styles.hsl = {
    ...styles.fill,
    color: 'white',
    paddingTop: '20px',
    fontSize: '30px',
}

render((
    <AnimationExample />
), document.getElementById('root'))

[pshrmn]

When you import from the react-transition-groupmodule, it is CSSTransitionGroup not ReactCSSTransitionGroup

[Bram-Zijp]

My bad.

Nobody seems to know the answer on my question though. Tried about 4-5 times on reactiflux and 2 questions at stackoverflow. I'm starting to think the way routes are handled in V4 it is no longer possible to use React Transition Group low level API.