From d3475476d149ff6bd42b1004cb35264d506871f3 Mon Sep 17 00:00:00 2001
From: icdevin <devin@doolin.io>
Date: Wed, 10 Aug 2016 01:14:33 -0400
Subject: [PATCH] [fixed] Updates webpack distribution config to reference the
 correct externals (#210)

Currently, if not using any kind of module loader, webpack falls back to looking for dependencies on the root (e.g. `window` in the browser). React and ReactDOM both have different names when looking up on the root, and these different names can be specified by making the `externals` prop an object where the values represent an object of loader type => name.

See [react-redux's webpack config](https://github.com/reactjs/react-redux/blob/master/webpack.config.js) for an example.
---
 webpack.dist.config.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/webpack.dist.config.js b/webpack.dist.config.js
index 953695e7..917fc79b 100644
--- a/webpack.dist.config.js
+++ b/webpack.dist.config.js
@@ -2,6 +2,19 @@ var webpack = require('webpack');
 var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 var env = process.env.WEBPACK_ENV;
 
+var reactExternal = {
+  root: 'React',
+  commonjs2: 'react',
+  commonjs: 'react',
+  amd: 'react'
+};
+var reactDOMExternal = {
+  root: 'ReactDOM',
+  commonjs2: 'react-dom',
+  commonjs: 'react-dom',
+  amd: 'react-dom'
+};
+
 module.exports = {
 
   entry: {
@@ -9,10 +22,10 @@ module.exports = {
     'react-modal.min': './lib/index.js'
   },
 
-  externals: [
-    'react',
-    'react-dom'
-  ],
+  externals: {
+    'react': reactExternal,
+    'react-dom': reactDOMExternal
+  },
 
   output: {
     filename: '[name].js',