diff --git a/src/vector/index.js b/src/vector/index.js
index ff31d7b62c..6d4411cd71 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -33,15 +33,23 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('sw.js');
 }
 
-// Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
-// the SDK until we have to in imports.
-console.log("Loading skin...");
-import * as sdk from 'matrix-react-sdk';
-import * as skin from "../component-index";
-sdk.loadSkin(skin);
-console.log("Skin loaded!");
+// React depends on Map & Set which we check for using modernizr's es6collections
+// if modernizr fails we may not have a functional react to show the error message.
+// try in react but fallback to an `alert`
+async function start() {
+    // load init.ts async so that its code is not executed immediately and we can catch any exceptions
+    const {loadSkin, loadApp} = await import(
+        /* webpackChunkName: "init" */
+        /* webpackPreload: true */
+        "./init");
 
-// Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
-// run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
-// import and thus running before the skin can load.
-require("./app").loadApp();
+    await loadSkin();
+    await loadApp();
+}
+start().catch(err => {
+    // try show the error in React
+    console.error(err);
+}).catch(err => {
+    // fall back to showing the error in an alert
+    console.error(err);
+});
diff --git a/src/vector/init.ts b/src/vector/init.ts
index 96745f53cc..9b720c7a15 100644
--- a/src/vector/init.ts
+++ b/src/vector/init.ts
@@ -112,3 +112,35 @@ export async function loadLanguage() {
         console.error("Unable to set language", e);
     }
 }
+
+export async function loadSkin() {
+    // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
+    // the SDK until we have to in imports.
+    console.log("Loading skin...");
+    const [sdk, skin] = await Promise.all([
+        import(
+            /* webpackChunkName: "matrix-react-sdk" */
+            /* webpackPreload: true */
+            "matrix-react-sdk"),
+        import(
+            /* webpackChunkName: "riot-web-component-index" */
+            /* webpackPreload: true */
+            "../component-index"),
+    ]);
+    sdk.loadSkin(skin);
+    console.log("Skin loaded!");
+}
+
+export async function loadApp() {
+    // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
+    // run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
+    // import and thus running before the skin can load.
+    const module = await import(
+        /* webpackChunkName: "riot-web-app" */
+        /* webpackPreload: true */
+        "./app");
+    await module.loadApp();
+}
+
+// throw new Error("foobar");
+window.Map = undefined;