From fdd13500eb1d04d4d2b72a9b970a1cd99483a205 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 18 Aug 2022 11:44:22 +0530
Subject: [PATCH] Add webpack changes

---
 .../components/layouts/ViewWithHeader.vue     |  2 +-
 config/webpack/environment.js                 |  8 ++++++++
 config/webpack/loaders/vue.js                 | 13 ++++++++++---
 vue.config.js                                 | 19 +++++++++++++++++++
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 vue.config.js

diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index 10c56121f..a491592b2 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -27,7 +27,7 @@
           :show-popout-button="appConfig.showPopoutButton"
         />
         <chat-header
-          v-if="isHeaderCollapsed"
+          v-else-if="isHeaderCollapsed"
           :title="channelConfig.websiteName"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index ee3f385f8..048f0997c 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -23,6 +23,14 @@ environment.loaders.append('audio', {
   },
 });
 
+environment.config.merge({
+  resolve: {
+    alias: {
+      vue: '@vue/compat',
+    },
+  },
+});
+
 environment.config.merge({ resolve });
 environment.config.set('output.filename', chunkData => {
   return chunkData.chunk.name === 'sdk'
diff --git a/config/webpack/loaders/vue.js b/config/webpack/loaders/vue.js
index 509c742b5..a66d70c21 100644
--- a/config/webpack/loaders/vue.js
+++ b/config/webpack/loaders/vue.js
@@ -1,6 +1,13 @@
 module.exports = {
   test: /\.vue(\.erb)?$/,
   use: [{
-    loader: 'vue-loader'
-  }]
-}
+    loader: 'vue-loader',
+    options: {
+      compilerOptions: {
+        compatConfig: {
+          MODE: 2,
+        },
+      },
+    },
+  }],
+};
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 000000000..bd85fc72f
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  chainWebpack: config => {
+    config.resolve.alias.set('vue', '@vue/compat');
+
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        };
+      });
+  },
+};