score:2

Accepted answer

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';

Related Query

More Query from same tag