Feature/dedupe

package.json

@@ -2,9 +2,11 @@
 	"private": true,
 	"name": "pcp-form-example",
 	"scripts": {
-		"prepare": "lerna bootstrap",
-		"start": "lerna bootstrap && cd packages/web-server && npm start",
-		"storybook": "cd packages/presentational-components && npm start"
+		"build": "npm run bootstrap && lerna run build",
+		"prepare": "npm run bootstrap",
+		"bootstrap": "lerna bootstrap",
+		"start": "npm run bootstrap && cd packages/web-server && npm start",
+		"storybook": "npm run bootstrap && cd packages/presentational-components && npm start"
 	},
 	"devDependencies": {
 		"lerna": "^2.5.1"

packages/web-server/config/webpack.config.dev.js

@@ -9,6 +9,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -22,6 +23,12 @@ const publicUrl = '';
 // Get environment variables to inject into our app.
 const env = getClientEnvironment(publicUrl);
 
+const mapDependenciesToFolder = (dependencies, folder) =>
+  dependencies.reduce((accumulator, dependency) => ({
+      [dependency]: path.resolve(`${folder}/${dependency}`),
+      ...accumulator
+    }), {});
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -88,6 +95,7 @@ module.exports = {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
+      ...mapDependenciesToFolder(['react', 'react-dom'], './node_modules')
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -218,6 +226,7 @@ module.exports = {
     ],
   },
   plugins: [
+    new DuplicatePackageCheckerPlugin(),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

packages/web-server/config/webpack.config.prod.js

@@ -10,6 +10,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -46,6 +47,12 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
     { publicPath: Array(cssFilename.split('/').length).join('../') }
   : {};
 
+const mapDependenciesToFolder = (dependencies, folder) =>
+  dependencies.reduce((accumulator, dependency) => ({
+      [dependency]: path.resolve(`${folder}/${dependency}`),
+      ...accumulator
+    }), {});
+
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -90,10 +97,11 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
+      ...mapDependenciesToFolder(['react', 'react-dom'], './node_modules')
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -121,7 +129,7 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              
+
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -149,7 +157,7 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-              
+
               compact: true,
             },
           },
@@ -234,6 +242,7 @@ module.exports = {
     ],
   },
   plugins: [
+    new DuplicatePackageCheckerPlugin(),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
@@ -274,7 +283,7 @@ module.exports = {
       },
       mangle: {
         safari10: true,
-      },        
+      },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default

packages/web-server/package.json

@@ -98,5 +98,8 @@
   },
   "eslintConfig": {
     "extends": "react-app"
+  },
+  "devDependencies": {
+    "duplicate-package-checker-webpack-plugin": "^2.0.1"
   }
 }