library of react components in webpack bundle export to use in on runtime rendering
<p>I am upgrading a legacy web2py (python) application to use react components. I am using webpack to transpile the jsx files to minified js bundle. I want to be able to use:</p>

<pre><code>ReactDOM.render(
  &lt;ComponentA arg1="hello" arg2="world" /&gt;,
  document.getElementById('react-container')
);
</code></pre>

<p>Where ComponentA is included in the bundle and the bundle is included on the web2py view. The issue is that I can't access ComponentA in the view. The following example will work:</p>

<pre><code>&lt;script&gt;
var ComponentA = React.createClass({
     render: function() {
      var p = React.createElement('p', null, 'Passed these props: ',this.props.arg1, ' and ', this.props.arg2);
      var div = React.createElement('div', { className: 'my-test' }, p);
      return div;
  }
});

var component = React.createElement(ComponentA, {arg1:"hello", arg2:"world"})
ReactDOM.render(
  component,//I would rather use &lt;ComponentA arg1="hello" arg2="world" /&gt;,
  document.getElementById('react-sample')
);

&lt;/script&gt;
</code></pre>

<p>I looked at <a href="https://github.com/webpack/docs/wiki/shimming-modules#exports-loader" rel="nofollow">exports-loader</a> and <a href="https://github.com/joeyguo/webpack-add-module-exports" rel="nofollow">webpack-add-module-exports</a> but I have not yet gotten it to work. Any help is greatly appreciated.</p>

<p>I solved it after I came across <a href="http://stackoverflow.com/a/32786185/3163075">this StackOverflow answer</a></p>

<p>First make sure that your <code>main.jsx</code> file (which would import all the components) also exports them:</p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import ComponentA from './components/A';
import ComponentB from './components/B';
import style from '../stylesheets/main.scss';

// This is how every tutorial shows you how to get started.
// However we want to use it "on-demand"
/* ReactDOM.render(
  &lt;ComponentA arg1="hello" arg2="world" /&gt;,
  document.getElementById('react-container')
);*/

// ... other stuff here

// Do NOT forget to export the desired components!
export {
  ComponentA,
  ComponentB
};
</code></pre>

<p>Then make sure you use <code>output.library</code> <a href="http://webpack.github.io/docs/configuration.html#output-library" rel="nofollow">("more" info in the docs)</a> in the <code>webpack.config.js</code> file:</p>

<pre><code>module.exports = {
    entry: {
        // 'vendor': ['bootstrap', 'analytics.js'],
        'main': './src/scripts/main.jsx'
    },
    output: {
        filename: './dist/scripts/[name].js',
        library: ['App', 'components'] 
// This will expose Window.App.components which will 
// include your exported components e.g. ComponentA and ComponentB
    }
// other stuff in the config
};
</code></pre>

<p>Then in the web2py view (make sure you include the build files e.g. main.js AND the appropriate containers):</p>

<pre><code>&lt;!-- Make sure you include the build files e.g. main.js --&gt;
&lt;!-- Some other view stuff --&gt;
&lt;div id="react-component-a"&gt;&lt;/div&gt;
&lt;div id="react-component-b"&gt;&lt;/div&gt;
&lt;script&gt;
// Below is how it would be used. 
// The web2py view would output a div with the proper id 
// and then output a script tag with the render block.
ReactDOM.render(
  React.createElement(App.components.ComponentA, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-a')
);

ReactDOM.render(
  React.createElement(App.components.ComponentB, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-b')
);
&lt;/script&gt;
</code></pre>

<p><strong>NOTE:</strong> I decided to use the vanilla react in the view instead of the JSX so no additional transpiling has to be done in the browser.</p>

python reactjs ecmascript-6 webpack web2py