From 26a218beb455b432ea1f1676941f5b049a170c5d Mon Sep 17 00:00:00 2001
From: Eimi Okuno <Eimi.Okuno@bbc.co.uk>
Date: Sat, 28 Sep 2019 09:34:02 +0100
Subject: [PATCH] Adding more configuration to the webpack config

---
 .../error-invariant-multiple-react-router-dom-09-28.md   | 2 +-
 package.json                                             | 1 +
 webpack.config.js                                        | 9 ++++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/guides/error-invariant-multiple-react-router-dom-09-28.md b/docs/guides/error-invariant-multiple-react-router-dom-09-28.md
index 134f672..1ebce18 100644
--- a/docs/guides/error-invariant-multiple-react-router-dom-09-28.md
+++ b/docs/guides/error-invariant-multiple-react-router-dom-09-28.md
@@ -4,7 +4,7 @@
 
 Turns out that this error "Error: Invariant failed" is because how [React Router v4](https://www.sitepoint.com/react-router-v4-complete-guide/) and [React Router v5]() is different. With the new v5 there can only be one Router, because it's using the new React Context API to do some routing. See here for another [explanation](https://gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05#explanation)
 
-Why we need two Routers is that we our very own Breadcrumb has LinkContainer, which depends on using the React-Router-Dom. So, when the component is published, it then also bundles the React-Router dependency. When we import the Breadcrumb, since we already have a React-Router in the main DPE-client repository, it breaks.
+Why we need two Routers is that Breadcrumb component has LinkContainer, which depends on React-Router-Dom. So, when the component is published, it then also bundles the React-Router dependency. When we import the Breadcrumb, since we already have a React-Router in the main DPE-client repository, it creates two Contexts in React. The routes created using a different Context cannot be found by React, and so it throws the `Invariant failed: You should not use <Route> outside a <Router>`.
 
 ## Suggestions
 
diff --git a/package.json b/package.json
index 930bb03..8536671 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
   },
   "peerDependencies": {
     "react-dom": "^16.9.0",
+    "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
diff --git a/webpack.config.js b/webpack.config.js
index 1828fb6..1f9e626 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -71,7 +71,8 @@ module.exports = {
   resolve: {
     alias: {
       'react': path.resolve(__dirname, './node_modules/react'),
-      'react-dom': path.resolve(__dirname, './node_modules/react-dom')
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom')
     }
   },
   externals: {
@@ -87,6 +88,12 @@ module.exports = {
       commonjs2: 'react-dom',
       amd: 'ReactDOM',
       root: 'ReactDOM'
+    },
+    'react-router-dom': {
+      commonjs: 'react-router-dom',
+      commonjs2: 'react-router-dom',
+      amd: 'ReactRouterDOM',
+      root: 'ReactRouterDOM'
     }
   }
 };