upgrade to @loadable/component

.babelrc

@@ -7,9 +7,9 @@
         ["@babel/typescript"]
       ],
       "plugins": [
+        ["@loadable/babel-plugin"],
         ["module-resolver", { "extensions": [".ts", ".tsx"], "root": ["./src"]}],
-        ["loadable-components/babel"],
-        ["styled-components", { "displayName": false, "preprocess": false, "ssr": true }]
+        ["styled-components", { "displayName": false }]
       ]
     },
     "production": {
@@ -19,9 +19,9 @@
         ["@babel/typescript"]
       ],
       "plugins": [
+        ["@loadable/babel-plugin"],
         ["module-resolver", { "extensions": [".ts", ".tsx"], "root": ["./src"]}],
-        ["loadable-components/babel"],
-        ["styled-components", { "displayName": false, "preprocess": false, "ssr": true }]
+        ["styled-components", { "displayName": false }]
       ]
     },
     "serverless": {
@@ -31,10 +31,9 @@
         ["@babel/typescript"]
       ],
       "plugins": [
+        ["@loadable/babel-plugin"],
         ["module-resolver", { "extensions": [".ts", ".tsx"], "root": ["./src"]}],
-        ["babel-plugin-dynamic-import-node"],
-        ["loadable-components/babel"],
-        ["styled-components", { "displayName": false, "preprocess": false, "ssr": true }]
+        ["styled-components", { "displayName": false }]
       ]
     }
   }

Makefile

@@ -18,8 +18,11 @@ export NODE_CONTAINER = \
 	--workdir /var/task \
 	$(CONTAINER_NAME)
 
-build:
-	@docker run --env-file $(ENV_FILE) $(NODE_CONTAINER) yarn run build
+build-server:
+	@docker run --env-file $(ENV_FILE) $(NODE_CONTAINER) yarn run build:server
+
+build-static:
+	@docker run --env-file $(ENV_FILE) $(NODE_CONTAINER) yarn run build:static
 
 deploy:
 	@make stop-docker

config/webpack/webpack.config.server.js

@@ -1,3 +1,4 @@
+const LoadablePlugin = require('@loadable/webpack-plugin')
 const CircularDependencyPlugin = require('circular-dependency-plugin')
 const path = require('path')
 const slsw = require('serverless-webpack')
@@ -11,8 +12,9 @@ const config = {
   externals: [nodeExternals()],
   output: {
     filename: '[name].js',
-    libraryTarget: 'commonjs',
+    libraryTarget: 'commonjs2',
     path: path.resolve(process.cwd(), '.webpack'),
+    publicPath: '/static/'
   },
   module: {
     rules: [
@@ -43,24 +45,13 @@ const config = {
   plugins: [
     new webpack.NamedModulesPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
-    new CircularDependencyPlugin({
-      exclude: /node_modules/,
-      failOnError: process.env.NODE_ENV === 'production'
-    }),
+    new CircularDependencyPlugin({ exclude: /node_modules/, failOnError: true }),
+    new LoadablePlugin()
   ],
   resolve: {
-    extensions: [
-      '.gql',
-      '.graphql',
-      '.json',
-      '.ts',
-      '.tsx',
-    ],
-    modules: [
-      path.resolve(process.cwd(), 'node_modules'), 'node_modules',
-      'src/app'
-    ],
-  },
+    extensions: [ '.wasm', '.mjs', '.js', '.json', '.jsx', '.graphql', '.ts', '.tsx' ],
+    modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules']
+  }
 }
 
 // patch serverless-offline, lambda always returns :UTC for the TZ and is a reserved variable

config/webpack/webpack.config.static.js

@@ -1,17 +1,17 @@
+const LoadablePlugin = require('@loadable/webpack-plugin')
 const CircularDependencyPlugin = require('circular-dependency-plugin')
 const path = require('path')
-const slsw = require('serverless-webpack')
 const webpack = require('webpack')
 
+const pkg = require('../../package.json')
+
 module.exports = {
   mode: process.env.NODE_ENV || 'development',
   devtool: 'eval-source-map',
   target: 'web',
-  entry: {
-    main: [
-      path.resolve(process.cwd(), 'src/platforms/browser/main.ts')
-    ],
-  },
+  entry: [
+    path.resolve(process.cwd(), 'src/platforms/browser/main.ts')
+  ],
   externals: [],
   optimization: {
     // https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-2
@@ -57,34 +57,26 @@ module.exports = {
     ],
   },
   plugins: [
-    new webpack.DefinePlugin(Object.assign({}, Object.keys(process.env).reduce((obj, key) => (
-        Object.assign(obj, { [`process.env.${key}`]: JSON.stringify(process.env[key]) })
-      ), {}), {
-        'process.env.PACKAGE_VERSION': '0.1.0' // JSON.stringify(package.version),
-      })),
+    new webpack.DefinePlugin([
+      'API_DOMAIN_NAME',
+      'APP_DOMAIN_NAME'
+    ].reduce((obj, key) => ({ ...obj, [`process.env.${key}`]: JSON.stringify(process.env[key]) }), {}), {
+      'process.env.PACKAGE_VERSION': pkg.version
+    }),
     new webpack.NamedModulesPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new CircularDependencyPlugin({ exclude: /node_modules/, failOnError: true }),
+    new LoadablePlugin()
   ],
   resolve: {
-    extensions: [
-      '.gql',
-      '.graphql',
-      '.js',
-      '.json',
-      '.ts',
-      '.tsx',
-    ],
-    modules: [
-      path.resolve(process.cwd(), 'node_modules'), 'node_modules',
-      'src/app'
-    ],
+    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx', '.graphql', '.ts', '.tsx'],
+    modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
   },
   devServer: {
     host: process.env.HOST || '0.0.0.0',
     port: 3000,
     proxy: {
-      // This proxies the docker website.server service when running `make start-website`
+      // This proxies the docker website.server service when running `make start`
       '/': 'http://website.server:3001'
     },
     publicPath: '/static/'

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   website.server:
-    container_name: serverless-react.website.server
+    container_name: serverless-react-ssr.server
     command: yarn run start:server
     env_file:
       - ${ENV_FILE}
@@ -14,7 +14,7 @@ services:
     working_dir: /var/task
 
   website.static:
-    container_name: serverless-react.website.static
+    container_name: serverless-react-ssr.static
     command: yarn run start:static
     env_file:
       - ${ENV_FILE}

package.json

@@ -40,23 +40,24 @@
     "graphql": "14.0.2"
   },
   "dependencies": {
+    "@loadable/component": "5.0.1",
+    "@loadable/server": "5.1.0",
     "apollo-cache-inmemory": "1.3.9",
     "apollo-client": "2.4.5",
     "apollo-link-http": "1.5.5",
     "apollo-link-schema": "1.1.1",
     "graphql": "14.0.2",
     "graphql-tag": "2.10.0",
     "isomorphic-fetch": "2.2.1",
-    "loadable-components": "2.2.3",
     "react": "16.6.1",
     "react-apollo": "2.2.4",
     "react-dom": "16.6.1",
     "react-ga": "2.5.3",
     "react-helmet": "5.2.0",
     "react-redux": "5.1.0",
-    "react-router": "4.3.1",
-    "react-router-config": "1.0.0-beta.4",
-    "react-router-dom": "4.3.1",
+    "react-router": "4.4.0-beta.6",
+    "react-router-config": "4.4.0-beta.6",
+    "react-router-dom": "4.4.0-beta.6",
     "redux": "4.0.1",
     "redux-form":"7.4.2",
     "sitemap": "2.1.0",
@@ -67,11 +68,12 @@
     "@babel/preset-env": "7.1.5",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.1.0",
+    "@loadable/babel-plugin": "5.0.1",
+    "@loadable/webpack-plugin": "5.0.2",
     "@types/react": "16.7.1",
     "@types/react-dom": "16.0.9",
     "aws-sdk": "2.352.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-dynamic-import-node": "2.2.0",
     "babel-plugin-module-resolver": "3.1.1",
     "babel-plugin-styled-components": "1.8.0",
     "circular-dependency-plugin": "5.0.2",

serverless-react-ssr.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

src/app/Root.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import gql from 'graphql-tag'
-import { graphql } from 'react-apollo'
 import { renderRoutes } from 'react-router-config'
 import { Link } from 'react-router-dom'
 
@@ -22,41 +20,11 @@ export default (props: any) => (
   <div>
     <header>
       <Nav>
-        <A to={'/'}>One</A>
-        <A to={'/anything'}>Two</A>
+        <A to={'/'}>Home</A>
+        <A to={'/page1'}>Page One</A>
+        <A to={'/page2'}>Page Two</A>
       </Nav>
     </header>
     <main>{renderRoutes(props.route.routes)}</main>
   </div>
 )
-
-const DehydratedOne = ({ className, ...props }) => (
-  <div className={className}>
-    <h1>One</h1>
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </div>
-)
-
-const StyledOne: any = styled(DehydratedOne)`
-  border: 2px solid #ddd;
-  margin: 1rem;
-  padding: 1rem;
-`
-
-const One = graphql(gql`
-  query Feed {
-    feed {
-      author {
-        name
-      }
-      title
-      text
-    }
-  }
-`)(StyledOne)
-
-const Two = () => (
-  <div>Two</div>
-)
-
-export { One, Two }

src/app/components/Loadable.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export default () => (
+  <pre>@loadable/component</pre>
+)

src/app/containers/Home/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export default () => (
+  <div>
+    <h2>Home</h2>
+  </div>
+)

src/app/containers/Page1/index.tsx

@@ -0,0 +1,11 @@
+import loadable from '@loadable/component'
+import * as React from 'react'
+
+const Loadable = loadable(() => import('../../components/Loadable'))
+
+export default () => (
+  <div>
+    <h2>Page 1</h2>
+    <Loadable />
+  </div>
+)

src/app/containers/Page2/index.tsx

@@ -0,0 +1,20 @@
+import gql from 'graphql-tag'
+import * as React from 'react'
+import { graphql } from 'react-apollo'
+
+export default graphql(gql`
+  query Feed {
+    feed {
+      author {
+        name
+      }
+      title
+      text
+    }
+  }
+`)(props => (
+  <div>
+    <h2>Page 2</h2>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+))

src/app/routes.ts

@@ -1,16 +1,31 @@
+import loadable from '@loadable/component'
 import withTracker from './addons/withTracker'
-import Main, { One, Two } from './Root'
+import Main from './Root'
+
+const Home = loadable(() => import('./containers/Home'))
+const Page1 = loadable(() => import('./containers/Page1'))
+const Page2 = loadable(() => import('./containers/Page2'))
 
 const routes = [{
   component: Main,
   routes: [
     {
-      component: withTracker(One),
+      component: withTracker(Home),
       exact: true,
       path: '/'
     },
     {
-      component: withTracker(Two),
+      component: withTracker(Page1),
+      exact: true,
+      path: '/page1'
+    },
+    {
+      component: withTracker(Page2),
+      exact: true,
+      path: '/page2'
+    },
+    {
+      component: withTracker(Home),
       path: '/*'
     }
   ]