Loading Vue devtools in electron in development mode - vue.js

Question

I was looking for a way to add Vue Devtools to the electron app I was working on. I tried a couple of methods that seemed to be outdated and finally succeded using this package:
electron-devtools-installer which I installed as a DEV dependency.
with this code:
import { app } from 'electron'
import installExtension from 'electron-devtools-installer';
const VUEJS3_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';
...
app.whenReady().then(() => {
installExtension(VUEJS3_DEVTOOLS)
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
});
but since this was a DEV dependency, the app fails to load due to the missing package in production.
I was wondering if there is a way to dynamicly load the package/extension only if not in production.

Answer 1

It took me many attempts to figure this out since this isn't directly documented anywhere and I lack the experience of loading ES6 modules to think of trying module.default.default.
This is the code that ended up working without issues in both development and production cases:
app.whenReady().then(() => {
if (process.env.DEBUGGING) // replace with whatever you use to check for dev env
import('electron-devtools-installer')
.then(mymodule => {
const installExtension = mymodule.default.default; // Default export
installExtension(mymodule.default.VUEJS_DEVTOOLS) // replace param with the ext ID of your choice
.then((name) => console.log(`Added Extension: ${name}`))
.catch((err) => console.log('An error occurred: ', err));
}).catch((err) => console.log('An error occurred: ', err));
}).catch((err) => console.log('An error occurred: ', err));
There might be a more elegant way to do this but this is all I needed. I am open to hear improvements on this.
Note: replace mymodule.default.VUEJS_DEVTOOLS with any other valid Chrome extension ID. The package has some popular ones built-in: Electron DevTools Installer - GitHub