Low Level React Animation API Unable To Make It Work

I was doing a bit of animation in my React application. I used ReactCSSTransitionGroup to add up the animations on page transition. But now I want to use the low level API ReactTransitionGroup but it's not working. I used:

import {ReactTransitionGroup} from 'react-addons-transition-group';

Then inside class I am rendering:

render() {
    const {user} = this.props;
    const styles = require('./App.scss');

    return (
      <div className={styles.app}>
        <ReactTransitionGroup component={React.DOM.html} transitionName="example">
          <div className={styles.appContent}>
            {this.props.children}
          </div>
        </ReactTransitionGroup>
      </div>
    );
}

I am unable to figure out what I'm doing wrong. I am getting this error:

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

Please let me know what mistake I am making.

You are using named ES6 import syntax:

import {ReactTransitionGroup} from 'react-addons-transition-group';

This is not the same as using ES6 default import syntax:

import ReactTransitionGroup from 'react-addons-transition-group';

If you use ES6 modules, it is paramount that you understand the difference between named and default imports. A module can have a single default export and/or many named exports, and there is a big difference between them.

Now, react-addons-transition-group is not an ES module. It is a CommonJS package published on npm. The official examples show how to use it in a CommonJS environment:

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

You probably use a transpiler like Babel. In this case it’s important that you understand how Babel interops with CommonJS modules. CommonJS is not like ES Modules and doesn’t have a concept of named or default exports. This is why Babel interprets modules written in CommonJS style as having only a single default export, and no named exports. Of course, ES modules compiled with Babel include special hints so it can recognize them later, but this isn’t the case for react-addons-css-transition-group which was originally written in CommonJS style.

This is why

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

corresponds to

import ReactTransitionGroup from 'react-addons-transition-group';

and not

import {ReactTransitionGroup} from 'react-addons-transition-group';