From 792538b9429ab68ae14185b3ba8e820ea26652b3 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Wed, 17 Jan 2018 23:23:17 +0200
Subject: [PATCH] Expose React-related dependencies as global variables for
 extension

---
 client/webpack/base.config.js | 19 ++++++++++++++++++-
 package-lock.json             |  6 ++++++
 package.json                  |  1 +
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/webpack/base.config.js b/client/webpack/base.config.js
index ea1a0e0c8..8d8c45134 100644
--- a/client/webpack/base.config.js
+++ b/client/webpack/base.config.js
@@ -11,6 +11,14 @@ const isVendorModule = (module) => {
   return res && res.indexOf('node_modules') >= 0 && res.match(/\.js$/);
 };
 
+// Mapping from package name to exposed global variable.
+const exposedDependencies = {
+  'focus-trap-react': 'FocusTrapReact',
+  'react': 'React',
+  'react-dom': 'ReactDOM',
+  'react-transition-group/CSSTransitionGroup': 'CSSTransitionGroup',
+}
+
 module.exports = function exports() {
   const entry = {
     // Create a vendor chunk that will contain polyfills, and all third-party dependencies.
@@ -48,7 +56,16 @@ module.exports = function exports() {
           loader: 'babel-loader',
           exclude: /node_modules/,
         },
-      ]
+      ].concat(Object.keys(exposedDependencies).map((name) => {
+        // Create expose-loader configs for each Wagtail dependency.
+        return {
+          test: require.resolve(name),
+          use: [{
+              loader: 'expose-loader',
+              options: exposedDependencies[name]
+          }]
+      }
+      }))
     },
     stats: {
       // Add chunk information (setting this to `false` allows for a less verbose output)
diff --git a/package-lock.json b/package-lock.json
index 3d900e328..8ee97776b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3326,6 +3326,12 @@
         }
       }
     },
+    "expose-loader": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/expose-loader/-/expose-loader-0.7.4.tgz",
+      "integrity": "sha512-lweINkewAXcQtNjd7j1gO3cd8O/8lNYijsEwH4YZ+Dv3gT2Kh9/YvJov5Mdp2A75QIhgOvsSyRa/ZG3wYjNZpA==",
+      "dev": true
+    },
     "extend": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
diff --git a/package.json b/package.json
index ae02ff208..b7e2be2c9 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "eslint-plugin-import": "^1.8.1",
     "eslint-plugin-jsx-a11y": "^1.5.3",
     "eslint-plugin-react": "^5.2.2",
+    "expose-loader": "^0.7.4",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "~4.0.0",
     "gulp-cssnano": "^2.1.2",