Fixing the dundling and removing the react dom stuff

docs/guides/error-invariant-multiple-react-router-dom-09-28.md

@@ -20,14 +20,57 @@ From [this](https://github.com/marmelab/react-admin/issues/3078) this is how it
 </BrowserRouter>
 ```
 
-### Use Webpack to sort it out
+### Use Webpack to remove dupes in Client
 
-Was also advised to do [this](https://gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05) but since our setup is CRA, it's quite a few hurdles to jump. If you have webpack, []() this section from the [webpack](https://webpack.js.org/guides/code-splitting/#prevent-duplication) is useful.
+Was also advised to do [this](https://gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05) but since our setup is CRA in DPE-client, it's quite a few hurdles to jump. If you have webpack, from the [webpack](https://webpack.js.org/guides/code-splitting/#prevent-duplication) is useful to understand to prevent dupes.
 
 ### peerDependencies
 
 [Yarn](https://yarnpkg.com/lang/en/docs/dependency-types/) website says:
 > Peer dependencies are a special type of dependency that would only ever come up if you were publishing your own package.
 > Having a peer dependency means that your package needs a dependency that is the same exact dependency as the person installing your package. This is useful for packages like react that need to have a single copy of react-dom that is also used by the person installing it.
 
-Going to try this, but this will require changes when actively developing and running storybook as storybook is run at "production".
+This also wouldn't work due to us actively developing storybook. It doesn't prevent webpack from packaging in the react-routers.
+
+### Solution: Update Storybook webpack to remove react, react-router and react-router-dom
+
+You can prevent Webpack to bundle things that should not be duped.
+See package.json:
+
+```js
+  resolve: {
+    alias: {
+      'react': path.resolve(__dirname, './node_modules/react'),
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      'react-router': path.resolve(__dirname, './node_modules/react-router'),
+      'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom')
+    }
+  },
+  externals: {
+    // Don't bundle react or react-dom or react-router
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'React',
+      root: 'React'
+    },
+    'react-dom': {
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'ReactDOM',
+      root: 'ReactDOM'
+    },
+    'react-router': {
+      commonjs: 'react-router',
+      commonjs2: 'react-router',
+      amd: 'ReactRouter',
+      root: 'ReactRouter'
+    },
+    'react-router-dom': {
+      commonjs: 'react-router-dom',
+      commonjs2: 'react-router-dom',
+      amd: 'ReactRouterDOM',
+      root: 'ReactRouterDOM'
+    }
+  }
+```

package.json

@@ -42,22 +42,19 @@
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "randomcolor": "^0.5.4",
-    "react": "^16.9.0",
     "react-bootstrap": "^1.0.0-beta.11",
     "react-color": "^2.17.1",
+    "react": "^16.9.0",
+    "react-router": "^5.1.1",
     "react-router-bootstrap": "^0.25.0",
+    "react-router-dom": "^5.1.1",
     "react-select": "^2.4.3",
     "react-sortable-hoc": "^1.10.1",
     "sass-loader": "^7.1.0",
     "save": "^2.4.0",
     "style-loader": "^0.23.1",
     "videocontext": "^0.53.0"
   },
-  "peerDependencies": {
-    "react-dom": "^16.9.0",
-    "react-router-bootstrap": "^0.25.0",
-    "react-router-dom": "^5.0.1"
-  },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",

webpack.config.js

@@ -72,11 +72,12 @@ module.exports = {
     alias: {
       'react': path.resolve(__dirname, './node_modules/react'),
       'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
+      'react-router': path.resolve(__dirname, './node_modules/react-router'),
       'react-router-dom': path.resolve(__dirname, './node_modules/react-router-dom')
     }
   },
   externals: {
-    // Don't bundle react or react-dom
+    // Don't bundle react or react-dom or react-router
     react: {
       commonjs: 'react',
       commonjs2: 'react',
@@ -89,6 +90,12 @@ module.exports = {
       amd: 'ReactDOM',
       root: 'ReactDOM'
     },
+    'react-router': {
+      commonjs: 'react-router',
+      commonjs2: 'react-router',
+      amd: 'ReactRouter',
+      root: 'ReactRouter'
+    },
     'react-router-dom': {
       commonjs: 'react-router-dom',
       commonjs2: 'react-router-dom',