feat(upgrade to latest webpack that finally supports dynamic expressions within resolveWeak!):

Author: faceyspacey

package.json

@@ -28,15 +28,14 @@
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-redux": "^5.0.5",
-    "react-universal-component": "^2.0.20",
+    "react-universal-component": "^2.4.0",
     "redux": "^3.7.0",
     "redux-devtools-extension": "^2.13.2",
-    "redux-first-router": "^1.9.6",
-    "redux-first-router-link": "^1.1.3",
+    "redux-first-router": "^1.9.15",
+    "redux-first-router-link": "^1.1.4",
     "reselect": "^3.0.1",
     "transition-group": "^0.0.1",
-    "webpack-dev-middleware": "^1.11.0",
-    "webpack-flush-chunks": "^1.1.16"
+    "webpack-flush-chunks": "^1.1.22"
   },
   "devDependencies": {
     "autodll-webpack-plugin": "^0.0.7",
@@ -67,8 +66,9 @@
     "rimraf": "^2.6.1",
     "stats-webpack-plugin": "^0.5.0",
     "travis-github-status": "^1.4.0",
-    "webpack": "^3.0.0",
-    "webpack-hot-middleware": "^2.17.1",
+    "webpack": "^3.5.4",
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-hot-middleware": "^2.18.2",
     "webpack-hot-server-middleware": "^0.1.0",
     "write-file-webpack-plugin": "^4.1.0"
   },

src/components/Admin.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import { admin } from '../css/Switcher'
+
+export default () => <div className={admin}>U FIGURED OUT HOW TO DO AUTH!</div>

src/components/Error.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { notFound } from '../css/Switcher'
+
+export default error =>
+  <div className={notFound}>
+    ERROR: {error.message}
+  </div>

src/components/Loading.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import { spinner } from '../css/Switcher'
+
+export default () => <div className={spinner}><div /></div>

src/components/Login.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import { login } from '../css/Switcher'
+
+export default () => <div className={login}>YOU ARE NOT ALLOWED IN!</div>

src/components/NotFound.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import { notFound } from '../css/Switcher'
+
+export default () => <div className={notFound}>PAGE NOT FOUND - 404</div>

src/components/Switcher.js

@@ -1,11 +1,18 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { TransitionGroup, Transition } from 'transition-group'
-import UniversalComponent from './UniversalComponent'
+import universal from 'react-universal-component'
 
+import Loading from './Loading'
 import isLoading from '../selectors/isLoading'
 import styles from '../css/Switcher'
 
+const UniversalComponent = universal(({ page }) => import(`./${page}`), {
+  minDelay: 500,
+  loading: Loading,
+  error: Error
+})
+
 const Switcher = ({ page, direction, isLoading }) =>
   <TransitionGroup
     className={`${styles.switcher} ${direction}`}

src/components/UniversalComponent.js

@@ -219,7 +219,7 @@
   border: 1px solid rgb(30,30,30);
   box-sizing: border-box;
   padding: 10px;
-  color: red;
+  color: red !important;
   font-size: 32px;
   text-shadow: 1px 1px 1px black;
   display: flex;