Expose React-related dependencies as global variables for extension

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)

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",

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",