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 1ebce18..3a054e7 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 @@ -20,9 +20,9 @@ From [this](https://github.com/marmelab/react-admin/issues/3078) this is how it ``` -### 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 @@ -30,4 +30,47 @@ Was also advised to do [this](https://gist.github.com/StringEpsilon/88c7b049c891 > 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' + } + } +``` diff --git a/package-lock.json b/package-lock.json index 10897ee..51188b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8424,6 +8424,19 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -10752,6 +10765,16 @@ "resolved": "https://registry.npmjs.org/mingo/-/mingo-1.3.3.tgz", "integrity": "sha1-aSLE0Ufvx3GgFCWixMj3eER4xUY=" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz", @@ -12999,6 +13022,38 @@ "react-is": "^16.9.0" } }, + "react-router": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.1.tgz", + "integrity": "sha512-ozTXqxKZsn4GfZqpG5rVFHSSxlNuDoMNxgyjM+mFJVhqlnPwwkRsAPkDm1PcNjBdYxMzqAhtz48HkQB6fSYaAQ==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, "react-router-bootstrap": { "version": "0.25.0", "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.25.0.tgz", @@ -13007,6 +13062,20 @@ "prop-types": "^15.5.10" } }, + "react-router-dom": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.1.tgz", + "integrity": "sha512-r8R8H0Vt2ISqpk02rR6VZBLk+JZdR6pZV+h9K1y0ISh3/G4GGByNevYBS69x6czcOcWVRcZmXjwY8l9UBCKV+w==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-select": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.4.tgz", @@ -13539,6 +13608,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -15516,6 +15590,16 @@ "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", "optional": true }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", @@ -16062,6 +16146,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index c62b188..eae7a91 100644 --- a/package.json +++ b/package.json @@ -42,10 +42,12 @@ "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", @@ -53,11 +55,6 @@ "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", diff --git a/webpack.config.js b/webpack.config.js index 1f9e626..c7ee91f 100644 --- a/webpack.config.js +++ b/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',