White screen bug when using alias

README.md

@@ -1,8 +1 @@
-### FuseBox :heart: Vue.js
-This project is to get you up and running with a basic implementation using FuseBox with Vue.js.
-
-#### Setup & run
-* `npm install`
-* `npm start`
-
-Open `http://localhost:8080/`
+This is a quick modification on the official fuse-box-view-seed to expose a bug I am having.

fuse.js

@@ -28,6 +28,9 @@ Sparky.task("config", () => {
         sourceMaps: !isProduction,
         useTypescriptCompiler: true,
         polyfillNonStandardDefaultUsage: true,
+        alias: {
+            'vue': 'vue/dist/vue.js'
+        },
         plugins: [
             VueComponentPlugin({
                 style: [
@@ -53,20 +56,20 @@ Sparky.task("config", () => {
         ]
     });
 
-    if(!isProduction){
+    if (!isProduction) {
         fuse.dev({
             open: true,
             port: 8080
         });
     }
-    
+
     const vendor = fuse.bundle("vendor")
-        .instructions("~ index.js");
+        .instructions("~ index.ts vue-hot-reload-api");
 
     const app = fuse.bundle("app")
-        .instructions("> [index.js]");
+        .instructions("> [index.ts] + components/**/*.vue + ts/**/*.ts");
 
-    if(!isProduction){
+    if (!isProduction) {
         app.watch().hmr();
     }
 })
@@ -75,6 +78,6 @@ Sparky.task("default", ["clean", "watch-assets", "config"], () => {
     return fuse.run();
 });
 
-Sparky.task("dist", [ "clean", "copy-assets", "set-prod", "config"], () => {
+Sparky.task("dist", ["clean", "copy-assets", "set-prod", "config"], () => {
     return fuse.run();
 });

src/components/App.vue

@@ -5,15 +5,16 @@
       <v-container fluid class="content">
         <router-view></router-view>
       </v-container>
+      <some-vue></some-vue>
     </main>
   </v-app>
 </template>
-<script>
-  import Navigation from './Navigation.vue';
+<script language="typescript">
+import Navigation from './Navigation.vue';
 
-  export default {
-    components: {
-        Navigation
-    }
+export default {
+  components: {
+    Navigation
   }
+}
 </script>

src/components/vue-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+}

src/index.js → src/index.ts

@@ -8,7 +8,7 @@ import 'vuetify/dist/vuetify.min.css';
 import App from './components/App.vue';
 import Home from './components/Home.vue';
 import Config from './components/Config.vue';
-
+import { Lib } from './ts/lib'
 Vue.use(VueRouter);
 Vue.use(Vuetify);
 
@@ -20,7 +20,10 @@ const router = new VueRouter({
 });
 
 new Vue({
-    router,
-    el: '#app',
-    render: h => h(App),
+  router,
+  el: '#app',
+  render: h => h(App),
 });
+
+var lib = new Lib();
+lib.run();

src/ts/lib.ts

@@ -0,0 +1,21 @@
+import Vue from "vue";
+
+export class Lib {
+    public run() {
+        console.log("In lib");
+    }
+}
+
+Vue.component('some-vue', {
+    props: ['label', 'value'],
+    data: function () {
+        return {
+            x: 1
+        };
+    },
+    template: 
+`<div>
+    <label>{{ this.label }}</label>
+    <p>x:{{x}}</p>      
+</div>`
+});

tsconfig.json

@@ -12,6 +12,7 @@
     "strictNullChecks": true,
     "noEmitHelpers": true,
     "noLib": false,
-    "outDir": "dist/"
+    "outDir": "dist/",
+    "allowSyntheticDefaultImports": true
   }
 }