diff --git a/package.json b/package.json
index 476be395..ebf3c11a 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "electron-store": "^8.0.1",
     "electron-updater": "^4.6.1",
     "electron-window-state": "^5.0.3",
+    "encoding": "^0.1.13",
     "leaflet": "^1.7.1",
     "marked": "^4.0.0",
     "moment": "^2.29.1",
diff --git a/src/renderer/index.js b/src/renderer/index.js
index f4f234b1..0ed4774f 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1,6 +1,6 @@
 'use strict';
-import { createApp } from 'vue';
 
+import { createApp, configureCompat } from 'vue';
 import '@mdi/font/css/materialdesignicons.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
@@ -9,6 +9,11 @@ import App from '@/App.vue';
 import { store } from '@/store';
 import i18n from '@/i18n';
 
+// @TODO: remove after migrating from vue2 -> vue3
+configureCompat({
+   MODE: 3
+});
+
 i18n.global.locale = store.state.settings.locale;
 
 const app = createApp(App);
diff --git a/webpack.renderer.config.js b/webpack.renderer.config.js
index c6756216..ca8d8e9c 100644
--- a/webpack.renderer.config.js
+++ b/webpack.renderer.config.js
@@ -6,42 +6,45 @@ const { VueLoaderPlugin } = require('vue-loader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ProgressPlugin = require('progress-webpack-plugin');
 
-const { dependencies, devDependencies, version } = require('./package.json');
+const { version } = require('./package.json');
 const { contributors } = JSON.parse(fs.readFileSync('./.all-contributorsrc', 'utf-8'));
 const parsedContributors = contributors.reduce((acc, c) => {
    acc.push(c.name);
    return acc;
 }, []).join(',');
 
-const externals = Object.keys(dependencies).concat(Object.keys(devDependencies));
 const isDevMode = process.env.NODE_ENV !== 'production';
-const whiteListedModules = ['vue'];
+const whiteListedModules = ['.bin', 'vue', '@vue'];
+const externals = {};
+
+fs.readdirSync('node_modules')
+   .filter(x => whiteListedModules.indexOf(x) === -1)
+   .forEach(mod => {
+      externals[mod] = `commonjs ${mod}`;
+   });
 
 const config = {
    name: 'renderer',
    mode: process.env.NODE_ENV,
-   devtool: isDevMode ? 'eval-source-map' : false,
-   entry: {
-      renderer: path.join(__dirname, './src/renderer/index.js')
-   },
+   devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
+   entry: path.join(__dirname, './src/renderer/index.js'),
    target: 'electron-renderer',
    output: {
-      libraryTarget: 'commonjs2',
       path: path.resolve(__dirname, 'dist'),
-      filename: '[name].js',
-      publicPath: ''
+      filename: 'renderer.js'
    },
    node: {
       global: true,
       __dirname: isDevMode,
       __filename: isDevMode
    },
-   externals: externals.filter((d) => !whiteListedModules.includes(d)),
+   externals: externals,
    resolve: {
       alias: {
-         // vue$: 'vue/dist/vue.common.js',
          '@': path.resolve(__dirname, 'src/renderer'),
-         common: path.resolve(__dirname, 'src/common')
+         common: path.resolve(__dirname, 'src/common'),
+         // @TODO: remove after migrating from vue2 -> vue3
+         vue: '@vue/compat'
       },
       extensions: ['', '.js', '.vue', '.json'],
       fallback: {