Switch from ts-loader to babel to fix HMR issues

Author: bobvandevijver

.babelrc

@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": 3
+      }
+    ],
+    "babel-preset-typescript-vue"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}

assets/js/TestContainer.vue

@@ -1,6 +1,6 @@
-import TestContainer from './TestContainer.vue';
+import Test from './Test.vue';
 import Vue from 'vue';
 
 new Vue({
-    render: (h) => h(TestContainer)
+    render: (h) => h(Test)
 }).$mount('#vue');

assets/js/app.ts

@@ -1,7 +1,12 @@
 {
     "devDependencies": {
-        "@symfony/webpack-encore": "^0.28.2",
+        "@babel/core": "^7.11.0",
+        "@babel/plugin-proposal-decorators": "^7.10.5",
+        "@babel/preset-env": "^7.11.0",
+        "@symfony/webpack-encore": "^0.30.0",
         "@types/webpack-env": "^1.15.1",
+        "babel-loader": "^8.0.6",
+        "babel-preset-typescript-vue": "^1.1.1",
         "core-js": "^3.0.0",
         "regenerator-runtime": "^0.13.2",
         "ts-loader": "^5.3.0",

package.json

@@ -48,16 +48,13 @@ Encore
     .enableVersioning(Encore.isProduction())
 
     // enables @babel/preset-env polyfills
-    .configureBabelPresetEnv((config) => {
-        config.useBuiltIns = 'usage';
-        config.corejs = 3;
-    })
+    .configureBabel(null)
 
     // enables Sass/SCSS support
     //.enableSassLoader()
 
     // uncomment if you use TypeScript
-    .enableTypeScriptLoader()
+    .enableBabelTypeScriptPreset()
 
     .enableVueLoader()