React: Requiring react-addons-css-transition-group includes React in webpack builds that exclude react

[moodysalem]

I'm trying to use the addon in a layout component with react and react-dom as peer dependencies, but if I include it my build goes from 55k to 750k.

The published npm module is simply this line of code:
module.exports = require('react/lib/ReactTransitionGroup');

If I look at react/lib/ReactTransitionGroup, I see this line
var React = require('./React');

Which causes webpack to pull in all of react, since I only defined 'react' as an external module

I could make 'react-addons-css-transition-group' external to my webpack build, but there's no distributed script for just that addon that adds it to the window variable (similar to how including the react script adds window.React and react-dom adds window.ReactDOM)

The timeout-transition-group module depends on react-addons-css-transition-group so it has the same problem

[zpao]

Yes, these modules only work when packaged with the react module from npm (it does this because we need access to private APIs). If you want to use the prepackaged React and an addon, then we recommend use use ReactWithAddons and map react-addons-css-transition-group to React.addons.CSSTransitionGroup.

[moodysalem]

OK, this works (I didn't know webpack supported it)

externals: {
    'react': { commonjs: 'react', commonjs2: 'react', amd: 'react', root: 'React' },
    'react-dom': { commonjs: 'react-dom', commonjs2: 'react-dom', amd: 'react-dom', root: 'ReactDOM' },
    'react-addons-css-transition-group': { commonjs: 'react-addons-css-transition-group', commonjs2: 'react-addons-css-transition-group', amd: 'react-addons-css-transition-group', root: ['React','addons','CSSTransitionGroup'] }
  }

Produces:

 factory(root["React"], root["React"]["addons"]["CSSTransitionGroup"], root["ReactDOM"])

Thanks

[lishengzxc]

https://github.com/facebook/react/issues/7874#issuecomment-290603617

This solves the problem

[ghost]

EDIT: removed to avoid confusion

[moodysalem]

EDIT: removed to avoid confusion

[gaearon]

I’m confused about what you’re trying to do. If you just want to exclude react from your build of a library that depends on react-transition-group (the standalone version), you just need to put react in your externals. This should be enough.

If you have any issues with standalone react-transition-group please file issues in https://github.com/reactjs/react-transition-group and you’ll get the answers there. Posting in this thread makes it very confusing because react-addons-transition-group (which this thread is about) had a completely different internal structure, which is why no information from this thread is relevant now.

Putting them together in comments like https://github.com/facebook/react/issues/6343#issuecomment-298412112 will just further confuse future readers, as there is no relation between the two, except one is the fork of the other.