reverting dashboard rendering to webview, part 1

.babelrc

@@ -1,10 +1,27 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "modules": "commonjs",
+        "targets": {
+          "esmodules": false
+        }
+      }
+    ],
     "@babel/preset-react",
     "@lingui/babel-preset-react"
   ],
   "plugins": [
-    "macros"
+    "macros",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "absoluteRuntime": false,
+        "regenerator": true,
+        "useESModules": true
+      }
+    ]
   ]
 }

package.json

@@ -5,11 +5,11 @@
   "version": "3.5.0-beta.1",
   "main": "dist/main.js",
   "scripts": {
-    "dev": "yarn compile:dll && concurrently yarn:dev:*",
+    "dev": "concurrently yarn:dev:*",
     "dev-run": "electron --inspect .",
     "dev:main": "DEBUG=true webpack --watch --progress --config webpack.main.ts",
     "dev:renderer": "DEBUG=true webpack --watch --progress --config webpack.renderer.ts",
-    "compile": "NODE_ENV=production concurrently 'yarn download-bins' 'yarn i18n:compile' 'yarn compile:dll' && concurrently yarn:compile:*",
+    "compile": "NODE_ENV=production concurrently 'yarn download-bins' 'yarn i18n:compile' && concurrently yarn:compile:*",
     "compile:main": "NODE_ENV=production webpack --progress --config webpack.main.ts $@",
     "compile:renderer": "NODE_ENV=production webpack --progress --config webpack.renderer.ts $@",
     "compile:dll": "webpack --config webpack.dll.ts $@",
@@ -196,6 +196,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",

src/common/system-ca.ts

@@ -1,7 +1,7 @@
 import { isMac, isWindows } from "./vars";
 
 if (isMac) {
-  console.warn("//FIXME: MAC-CA IMPORT ERROR!");
+  // fixme: mac-ca import error
   // require("mac-ca");
 }
 if (isWindows) {

src/common/vars.ts

@@ -17,7 +17,6 @@ export const mainDir = path.join(contextDir, "src/main");
 export const rendererDir = path.join(contextDir, "src/renderer");
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-export const tsConfigFile = path.resolve(contextDir, "tsconfig.json");
 
 // Apis
 export const staticProto = "static://"

src/main/cluster-manager.ts

@@ -12,6 +12,7 @@ import { promises } from "fs"
 import  { ensureDir } from "fs-extra"
 import filenamify from "filenamify"
 import { v4 as uuid } from "uuid"
+import { apiPrefix } from "../common/vars";
 
 export type FeatureInstallRequest = {
   name: string;
@@ -261,7 +262,7 @@ export class ClusterManager {
         cluster = this.clusters.get(clusterId)
         if (cluster) {
           // we need to swap path prefix so that request is proxied to kube api
-          req.url = req.url.replace(`/${clusterId}`, "/api-kube")
+          req.url = req.url.replace(`/${clusterId}`, apiPrefix.KUBE_BASE)
         }
       }
     } else {

src/main/cluster.ts

@@ -9,6 +9,7 @@ import { Kubectl } from "./kubectl";
 import { PromiseIpc } from "electron-promise-ipc"
 import request from "request-promise-native"
 import { KubeconfigManager } from "./kubeconfig-manager"
+import { apiPrefix } from "../common/vars";
 
 enum ClusterStatus {
   AccessGranted = 2,
@@ -180,7 +181,8 @@ export class Cluster implements ClusterInfo {
   }
 
   protected async k8sRequest(path: string, opts: request.RequestPromiseOptions = {}) {
-    const url = `http://127.0.0.1:${this.port}/api-kube${path}`; // fixme: remove hardcoded api prefix
+    const prefix = apiPrefix.KUBE_BASE;
+    const url = `http://127.0.0.1:${this.port}${prefix}${path}`;
     opts.json = true;
     opts.timeout = 10000;
     opts.headers = Object.assign({}, opts.headers, {

src/main/index.ts

@@ -1,23 +1,139 @@
 // Main process
 
 import "../common/system-ca"
-import { app, BrowserWindow } from "electron"
+import "../common/prometheus-providers"
+import { app, dialog, protocol } from "electron"
+import { PromiseIpc } from "electron-promise-ipc"
+import path from "path"
+import { format as formatUrl } from "url"
+import logger from "./logger"
+import initMenu from "./menu"
+import * as proxy from "./proxy"
+import { WindowManager } from "./window-manager";
+import { clusterStore } from "../common/cluster-store"
+import { tracker } from "./tracker"
+import { ClusterManager } from "./cluster-manager";
+import AppUpdater from "./app-updater"
+import { shellSync } from "./shell-sync"
+import { getFreePort } from "./port"
+import { mangleProxyEnv } from "./proxy-env"
+import { findMainWebContents } from "./webcontents"
+import { registerStaticProtocol } from "../common/register-static";
+import { isMac } from "../common/vars";
 
-console.log('MAIN', process.resourcesPath)
+mangleProxyEnv()
-console.log('userData', app.getPath("userData"))
+if (app.commandLine.getSwitchValue("proxy-server") !== "") {
+  process.env.HTTPS_PROXY = app.commandLine.getSwitchValue("proxy-server")
+}
 
-app.whenReady().then(async function start() {
+const promiseIpc = new PromiseIpc({ timeout: 2000 })
-  var mainWindow = new BrowserWindow({
+let windowManager: WindowManager = null;
-    width: 1024,
+let clusterManager: ClusterManager = null;
-    height: 768,
-    show: false,
-    webPreferences: {
-      devTools: true,
-      nodeIntegration: true,
-    }
-  });
 
-  await mainWindow.loadFile("dist/index.html");
+const vmURL = formatUrl({
-  mainWindow.show();
+  pathname: path.join(__dirname, "dist/index.html"),
-  mainWindow.focus();
+  protocol: "file",
-});
+  slashes: true,
+})
+
+async function main() {
+  await shellSync()
+
+  const updater = new AppUpdater()
+  updater.start();
+
+  tracker.event("app", "start");
+
+  registerStaticProtocol();
+  protocol.registerFileProtocol('store', (request, callback) => {
+    const url = request.url.substr(8)
+    callback(path.normalize(`${app.getPath("userData")}/${url}`))
+  }, (error) => {
+    if (error) console.error('Failed to register protocol')
+  })
+
+  let port: number = null
+  // find free port
+  try {
+    port = await getFreePort()
+  } catch (error) {
+    logger.error(error)
+    await dialog.showErrorBox("Lens Error", "Could not find a free port for the cluster proxy")
+    app.quit();
+  }
+
+  // create cluster manager
+  clusterManager = new ClusterManager(clusterStore.getAllClusterObjects(), port)
+
+  // run proxy
+  try {
+    proxy.listen(port, clusterManager)
+  } catch (error) {
+    logger.error(`Could not start proxy (127.0.0:${port}): ${error.message}`)
+    await dialog.showErrorBox("Lens Error", `Could not start proxy (127.0.0:${port}): ${error.message || "unknown error"}`)
+    app.quit();
+  }
+
+  // boot windowmanager
+  windowManager = new WindowManager();
+  windowManager.showMain(vmURL)
+
+  initMenu({
+    logoutHook: async () => {
+      // IPC send needs webContents as we're sending it to renderer
+      promiseIpc.send('logout', findMainWebContents(), {}).then((data: any) => {
+        logger.debug("logout IPC sent");
+      })
+    },
+    showPreferencesHook: async () => {
+      // IPC send needs webContents as we're sending it to renderer
+      promiseIpc.send('navigate', findMainWebContents(), { name: 'preferences-page' }).then((data: any) => {
+        logger.debug("navigate: preferences IPC sent");
+      })
+    },
+    addClusterHook: async () => {
+      promiseIpc.send('navigate', findMainWebContents(), { name: "add-cluster-page" }).then((data: any) => {
+        logger.debug("navigate: add-cluster-page  IPC sent");
+      })
+    },
+    showWhatsNewHook: async () => {
+      promiseIpc.send('navigate', findMainWebContents(), { name: "whats-new-page" }).then((data: any) => {
+        logger.debug("navigate: whats-new-page  IPC sent");
+      })
+    },
+    clusterSettingsHook: async () => {
+      promiseIpc.send('navigate', findMainWebContents(), { name: "cluster-settings-page" }).then((data: any) => {
+        logger.debug("navigate: cluster-settings-page  IPC sent");
+      })
+    },
+  }, promiseIpc)
+}
+
+app.on("ready", main)
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (!isMac) {
+    app.quit();
+  } else {
+    windowManager = null
+    if (clusterManager) clusterManager.stop()
+  }
+})
+app.on("activate", () => {
+  if (!windowManager) {
+    logger.debug("activate main window")
+    windowManager = new WindowManager(false)
+    windowManager.showMain(vmURL)
+  }
+})
+app.on("will-quit", async (event) => {
+  event.preventDefault(); // To allow mixpanel sending to be executed
+  if (clusterManager) clusterManager.stop()
+  app.exit(0);
+})
+
+// todo: auto-restart app in dev-mode
+// if (isDevelopment) {
+//   require('electron-reloader')(module);
+// }

src/main/index_backup.ts

@@ -1,139 +0,0 @@
-// Main process
-
-import "../common/system-ca"
-import "../common/prometheus-providers"
-import { app, dialog, protocol } from "electron"
-import { PromiseIpc } from "electron-promise-ipc"
-import path from "path"
-import { format as formatUrl } from "url"
-import logger from "./logger"
-import initMenu from "./menu"
-import * as proxy from "./proxy"
-import { WindowManager } from "./window-manager";
-import { clusterStore } from "../common/cluster-store"
-import { tracker } from "./tracker"
-import { ClusterManager } from "./cluster-manager";
-import AppUpdater from "./app-updater"
-import { shellSync } from "./shell-sync"
-import { getFreePort } from "./port"
-import { mangleProxyEnv } from "./proxy-env"
-import { findMainWebContents } from "./webcontents"
-import { registerStaticProtocol } from "../common/register-static";
-import { isDevelopment, isMac } from "../common/vars";
-
-mangleProxyEnv()
-if (app.commandLine.getSwitchValue("proxy-server") !== "") {
-  process.env.HTTPS_PROXY = app.commandLine.getSwitchValue("proxy-server")
-}
-const promiseIpc = new PromiseIpc({ timeout: 2000 })
-
-let windowManager: WindowManager = null;
-let clusterManager: ClusterManager = null;
-const vmURL = isDevelopment ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` : formatUrl({
-  pathname: path.join(__dirname, "index.html"),
-  protocol: "file",
-  slashes: true,
-})
-
-async function main() {
-  await shellSync()
-
-  const updater = new AppUpdater()
-  updater.start();
-
-  tracker.event("app", "start");
-
-  registerStaticProtocol();
-  protocol.registerFileProtocol('store', (request, callback) => {
-    const url = request.url.substr(8)
-    callback(path.normalize(`${app.getPath("userData")}/${url}`))
-  }, (error) => {
-    if (error) console.error('Failed to register protocol')
-  })
-
-  let port: number = null
-  // find free port
-  try {
-    port = await getFreePort()
-  } catch (error) {
-    logger.error(error)
-    await dialog.showErrorBox("Lens Error", "Could not find a free port for the cluster proxy")
-    app.quit();
-  }
-
-  // create cluster manager
-  clusterManager = new ClusterManager(clusterStore.getAllClusterObjects(), port)
-
-  // run proxy
-  try {
-    proxy.listen(port, clusterManager)
-  } catch (error) {
-    logger.error(`Could not start proxy (127.0.0:${port}): ${error.message}`)
-    await dialog.showErrorBox("Lens Error", `Could not start proxy (127.0.0:${port}): ${error.message || "unknown error"}`)
-    app.quit();
-  }
-
-  // boot windowmanager
-  windowManager = new WindowManager();
-  windowManager.showMain(vmURL)
-
-  initMenu({
-    logoutHook: async () => {
-      // IPC send needs webContents as we're sending it to renderer
-      promiseIpc.send('logout', findMainWebContents(), {}).then((data: any) => {
-        logger.debug("logout IPC sent");
-      })
-    },
-    showPreferencesHook: async () => {
-      // IPC send needs webContents as we're sending it to renderer
-      promiseIpc.send('navigate', findMainWebContents(), { name: 'preferences-page' }).then((data: any) => {
-        logger.debug("navigate: preferences IPC sent");
-      })
-    },
-    addClusterHook: async () => {
-      promiseIpc.send('navigate', findMainWebContents(), { name: "add-cluster-page" }).then((data: any) => {
-        logger.debug("navigate: add-cluster-page  IPC sent");
-      })
-    },
-    showWhatsNewHook: async () => {
-      promiseIpc.send('navigate', findMainWebContents(), { name: "whats-new-page" }).then((data: any) => {
-        logger.debug("navigate: whats-new-page  IPC sent");
-      })
-    },
-    clusterSettingsHook: async () => {
-      promiseIpc.send('navigate', findMainWebContents(), { name: "cluster-settings-page" }).then((data: any) => {
-        logger.debug("navigate: cluster-settings-page  IPC sent");
-      })
-    },
-  }, promiseIpc)
-}
-
-app.on("ready", main)
-app.on('window-all-closed', function () {
-  // On OS X it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (!isMac) {
-    app.quit();
-  }
-  else {
-    windowManager = null
-    if (clusterManager) clusterManager.stop()
-  }
-})
-app.on("activate", () => {
-  if (!windowManager) {
-    logger.debug("activate main window")
-    windowManager = new WindowManager(false)
-    windowManager.showMain(vmURL)
-  }
-})
-app.on("will-quit", async (event) => {
-  event.preventDefault(); // To allow mixpanel sending to be executed
-  if (clusterManager) clusterManager.stop()
-  app.exit(0);
-})
-
-// todo: check auto-restart app in dev-mode
-// if (isDevelopment) {
-//   require('electron-reloader')(module);
-// }

src/main/proxy.ts

@@ -8,6 +8,7 @@ import logger from "./logger"
 import * as shell from "./node-shell-session"
 import { ClusterManager } from "./cluster-manager"
 import { Router } from "./router"
+import { apiPrefix } from "../common/vars";
 
 export class LensProxy {
   public static readonly localShellSessions = true
@@ -110,9 +111,10 @@ export class LensProxy {
   }
 
   protected async getProxyTarget(req: http.IncomingMessage, contextHandler: ContextHandler): Promise<httpProxy.ServerOptions> {
-    if (req.url.startsWith("/api-kube/")) {
+    const prefix = apiPrefix.KUBE_BASE;
+    if (req.url.startsWith(prefix)) {
       delete req.headers.authorization
-      req.url = req.url.replace("/api-kube", "")
+      req.url = req.url.replace(prefix, "")
       const isWatchRequest = req.url.includes("watch=")
       return await contextHandler.getApiTarget(isWatchRequest)
     }

src/main/routes/metrics.ts

@@ -2,6 +2,7 @@ import { LensApiRequest } from "../router"
 import { LensApi } from "../lens-api"
 import requestPromise from "request-promise-native"
 import { PrometheusProviderRegistry, PrometheusProvider, PrometheusNodeQuery, PrometheusClusterQuery, PrometheusPodQuery, PrometheusPvcQuery, PrometheusIngressQuery, PrometheusQueryOpts} from "../prometheus/provider-registry"
+import { apiPrefix } from "../../common/vars";
 
 export type IMetricsQuery = string | string[] | {
   [metricName: string]: string;
@@ -12,7 +13,7 @@ class MetricsRoute extends LensApi {
   public async routeMetrics(request: LensApiRequest) {
     const { response, cluster} = request
     const query: IMetricsQuery = request.payload;
-    const serverUrl = `http://127.0.0.1:${cluster.port}/api-kube`
+    const serverUrl = `http://127.0.0.1:${cluster.port}${apiPrefix.KUBE_BASE}`
     const headers = {
       "Host": `${cluster.id}.localhost:${cluster.port}`,
       "Content-type": "application/json",

src/renderer/_vue/App.vue

@@ -1,29 +1,33 @@
 <template>
-  <div class="draggable-top" />
+  <div id="app_vue">
-  <div class="main-view" :class="{ 'menu-visible': isMenuVisible }">
+    <div id="lens-container" />
-    <main-menu v-if="isMenuVisible" />
+    <div class="draggable-top"/>
-    <router-view />
+    <div class="main-view" :class="{ 'menu-visible': isMenuVisible }">
+      <main-menu v-if="isMenuVisible"/>
+      <router-view/>
+    </div>
+    <bottom-bar v-if="isMenuVisible"/>
   </div>
-  <bottom-bar v-if="isMenuVisible" />
 </template>
 
 <script>
 import MainMenu from "@/_vue/components/MainMenu/MainMenu";
 import BottomBar from "@/_vue/components/BottomBar/BottomBar";
+
 export default {
   name: 'Lens',
   components: {
     BottomBar,
     MainMenu
   },
-  computed:{
+  computed: {
-    isMenuVisible: function(){ return this.$store.getters.isMenuVisible }
+    isMenuVisible: function () { return this.$store.getters.isMenuVisible }
   }
 }
 </script>
 
 <style scoped>
-  .draggable-top{
+  .draggable-top {
     -webkit-app-region: drag;
     left: 0;
     top: 0;

src/renderer/_vue/assets/css/app.scss

@@ -25,18 +25,7 @@ pre {
   color: $lens-text-color-light;
 }
 
-// react-app container (dashboard)
 #app {
-  position: absolute;
-  top: 0;
-  left: 70px;
-  right: 0;
-  height: 100%;
-  z-index: 100;
-  display: none;
-}
-
-#app_vue {
   width: 100%;
   height: 100%;
   & > .main-view{
@@ -161,7 +150,7 @@ h1, h2, h3, h4, h5, h6{
 
 // Force BS modals to use main app font etc.
 .modal-open{
-  @extend #app_vue
+  @extend #app
 }
 
 .popover {
@@ -205,3 +194,13 @@ h1, h2, h3, h4, h5, h6{
     font-size: 16px;
   }
 }
+
+#lens-container {
+  position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  height: 100%;
+  z-index: 100;
+  display: none;
+}

src/renderer/_vue/components/AddWorkspacePage.vue

@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/components/EditWorkspacePage.vue

@@ -98,7 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/components/PreferencesPage.vue

@@ -225,7 +225,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
 }
 .lens-preferences {

src/renderer/_vue/components/WorkspacesPage.vue

@@ -98,7 +98,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app_vue > .main-view > .content {
+#app > .main-view > .content {
   left: 70px;
   right: 70px;
 }

src/renderer/_vue/index.js

@@ -1,3 +1,4 @@
+import "../../common/system-ca"
 import "./assets/css/app.scss"
 import "prismjs";
 import "prismjs/components/prism-yaml"
@@ -29,19 +30,19 @@ Vue.mixin({
   }
 })
 
-// run
+// any initialization we want to do for app state
-setTimeout(main, 250);
+setTimeout(() => {
-
+  store.dispatch('init', ).catch((error) => {
-export async function main() {
+    console.error(error)
-  try {
+  }).finally(() => {
-    await store.dispatch('init');
+    /* eslint-disable no-new */
+    console.log("start vue")
     new Vue({
-      components: {App},
+      components: { App },
+      persist,
       store,
       router,
       template: '<App/>'
-    }).$mount('#app_vue')
+    }).$mount('#app')
-  } catch (err) {
+  })
-    console.error(err)
+}, 0)
-  }
-}

src/renderer/_vue/store/modules/clusters.ts

@@ -166,7 +166,7 @@ const actions: ActionTree<ClusterState, any>  = {
   },
 
   attachWebview({commit}, lens: LensWebview) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container || !lens.webview) {
       return
     }
@@ -190,7 +190,7 @@ const actions: ActionTree<ClusterState, any>  = {
     promiseIpc.send("enableClusterSettingsMenuItem", lens.id)
   },
   detachWebview({commit}, lens: LensWebview) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container) { return }
     container.childNodes.forEach((child: any) => {
       if (child === lens.webview) {
@@ -203,7 +203,7 @@ const actions: ActionTree<ClusterState, any>  = {
     promiseIpc.send("disableClusterSettingsMenuItem")
   },
   hideWebviews({commit}) {
-    const container: any = document.getElementById("app");
+    const container: any = document.getElementById("lens-container");
     if (!container) { return }
     container.style = "display: none;"
     container.childNodes.forEach((child: any) => {

src/renderer/components/app.tsx

@@ -1,4 +1,3 @@
-import "../../common/system-ca"
 import "./app.scss";
 
 import React from "react";

src/renderer/template.html

@@ -7,15 +7,11 @@
 </head>
 <body>
 
-We are using node <script>document.write(process.versions.node)</script>,
-Chrome <script>document.write(process.versions.chrome)</script>,
-and Electron <script>document.write(process.versions.electron)</script>.
-
 <div id="app"></div>
-<div id="app_vue"></div>
 
-<script src="dll.js"></script>
+<!--<div id="app_vue"></div>-->
-<script src="renderer_vue.js"></script>
+<!--<script src="dll.js"></script>-->
+<!--<script src="renderer_vue.js"></script>-->
 
 </body>
 </html>

webpack.main.ts

@@ -7,6 +7,7 @@ export default function (): webpack.Configuration {
   return {
     context: __dirname,
     target: "electron-main",
+    devtool: "source-map",
     mode: isProduction ? "production" : "development",
     cache: isDevelopment,
     entry: {
@@ -18,12 +19,18 @@ export default function (): webpack.Configuration {
     resolve: {
       extensions: ['.json', '.js', '.ts']
     },
-    externals: [
+    node: {
-      "@kubernetes/client-node",
+      // webpack modifies node internals by default, keep as is for main-process
-      "handlebars",
+      __dirname: false,
-      "node-pty",
+      __filename: false,
-      "ws",
+    },
-    ],
+    // fixme: hiding warnings during compilation, but creates runtime error
+    // externals: [
+    //   "@kubernetes/client-node",
+    //   "handlebars",
+    //   "node-pty",
+    //   "ws",
+    // ],
     module: {
       rules: [
         {
@@ -38,7 +45,7 @@ export default function (): webpack.Configuration {
             options: {
               transpileOnly: true,
             }
-          },
+          }
         },
       ]
     },

webpack.renderer.ts

@@ -6,7 +6,6 @@ import TerserPlugin from "terser-webpack-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin"
 import { VueLoaderPlugin } from "vue-loader"
 import { htmlTemplate, isDevelopment, isProduction, outDir, rendererDir, sassCommonVars } from "./src/common/vars";
-import { libraryTarget, manifestPath } from "./webpack.dll";
 
 export default [
   webpackConfigReact,
@@ -17,8 +16,8 @@ export function webpackConfigReact(): webpack.Configuration {
   return {
     context: __dirname,
     target: "electron-renderer",
+    devtool: "source-map",
     mode: isProduction ? "production" : "development",
-    devtool: isProduction ? "source-map" : "cheap-module-eval-source-map",
     cache: isDevelopment,
     entry: {
       renderer: path.resolve(rendererDir, "components/app.tsx"),
@@ -119,16 +118,12 @@ export function webpackConfigReact(): webpack.Configuration {
       // new ForkTsCheckerPlugin(),
 
       // todo: check if this actually works in mode=production files
-      new webpack.DllReferencePlugin({
+      // new webpack.DllReferencePlugin({
-        context: process.cwd(),
+      //   context: process.cwd(),
-        manifest: manifestPath,
+      //   manifest: manifestPath,
-        sourceType: libraryTarget,
+      //   sourceType: libraryTarget,
-      }),
+      // }),
 
-      new HtmlWebpackPlugin({
-        template: htmlTemplate,
-        inject: true,
-      }),
       new MiniCssExtractPlugin({
         filename: "[name].css",
       }),
@@ -188,6 +183,11 @@ export function webpackConfigVue(): webpack.Configuration {
   config.plugins = [
     new VueLoaderPlugin(),
     new ForkTsCheckerPlugin(),
+
+    new HtmlWebpackPlugin({
+      template: htmlTemplate,
+      inject: true,
+    }),
   ];
 
   return config;

yarn.lock

@@ -390,7 +390,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -716,7 +716,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
-"@babel/plugin-transform-runtime@^7.10.1":
+"@babel/plugin-transform-runtime@^7.6.2":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.1.tgz#fd1887f749637fb2ed86dc278e79eb41df37f4b1"
   integrity sha512-4w2tcglDVEwXJ5qxsY++DgWQdNJcCCsPxfT34wCUwIf2E7dI7pMpH8JczkMBbgBTNzBX62SZlNJ9H+De6Zebaw==
@@ -889,7 +889,7 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-transform-typescript" "^7.10.1"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
   integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==