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 outside a `. ## 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' } } };