Missing modules in electron application following the build process on a Mac device

Currently, I am working on a small Electron application that utilizes Vue and TypeScript. While running the app in development mode, everything functions properly. However, when I build the app using Electron Builder, certain modules seem to disappear. Specifically, the modules adm-zip and sudo-prompt vanish during the build process. As a result, when the app is launched, an error occurs at these lines of code: 

const AdmZip = window.require('adm-zip');
. Even after attempting to replace these modules with different ones, the issue persists. I suspect it may be related to webpack and TypeScript, but my lack of expertise in these areas leaves me uncertain.

Although other modules such as various Node packages and the electron-store module are functioning correctly, I am struggling with finding a solution for this particular problem. Is this a common issue, and should I be importing the modules differently somehow? The standard methods like import or require do not work; instead, I have to use window.require.

If you'd like to take a look at the repository, you can find it here: https://github.com/w3champions/w3champions-launcher on branch AddLauncherStuff

typescriptvue.jselectronelectron-builder

Answer №1

After some digging, I pinpointed the issue: adm-zip requires external dependencies, so it needs to be added as an external dependency in the vue.config.js. This approach can also be used for other modules with similar requirements. By placing the following code snippet in the vue.config.js file at the root of my project directory, I was able to successfully incorporate adm-zip into the final build without additional build steps. Here's the configuration I used:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      externals: ['adm-zip']
    }
  }
}

Answer №2

Running the command "npm run build" with Administrator rights on my Windows operating system went smoothly without any issues.

I trust that this information will be beneficial to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering a DOM Element Post Mouse Click Event Using HostListener in Angular 8

Is there a way to locate the current DOM element on a page after clicking the mouse? I am currently attempting to utilize HostListener in Angular 8. @HostListener('click') onClick(){ window.alert('Current DOM element is'); } ...

angulartypescriptangular8

Accessing composable variables in Vue 3 without having to redefine refs from within a function

Currently, I am implementing a parent companyList component along with a reusable Table component and an useFetch composable in vue 3.2. Prior to integrating the Table component, my code looked like this: companyList <script setup> import { com ...

javascriptvue.jsvuejs3

Is it possible to use HostBinding with an unnamed arrow function?

Utilizing @HostBinding to connect the results of a function to the host element's visible attribute: @HostBinding('attr.visible') private get visibleAttr(): any { return this._visible ? '' : null; } The name of the function app ...

angulartypescript

Tips on executing an asynchronous operation before exiting

I have been attempting to execute an asynchronous operation before my process ends. By 'ends', I mean in every instance of termination: ctrl+c Uncaught exception Crashes End of code Anything.. As far as I know, the exit event handles this for ...

node.jsasynchronoustypescriptprocessterminate

Difficulty transferring cookie/session between Express backend and React frontend

I'm encountering an issue with retrieving a session/cookie from an express backend to a react frontend. Front end: async function submitData() { await axios.post('http://127.0.0.1:8082/api/login', { credentials: 'include&ap ...

reactjstypescriptexpressredis

Guiding you on exporting a Typescript class with parameters in Node.js

Trying to find the Typescript equivalent of require('mytypescriptfile')(optionsObject); This is the TS code provided: export class Animal { name: string; public bark(): string { return "bark " + this.name; } constructor(color:string) ...

javascriptnode.jstypescript

What is the best method for displaying file size in a user-friendly format using Angular 6?

Imagine having this snippet in an HTML file: *ngFor="let cell of dateFormat(row)">{{cell | filesize}}</td>, where the dateFormat function looks like this: dateFormat(row:string){ var today = new Date(row[4]); let latest_date = this.date ...

angularhtmltypescriptangular6

Implementing Login using Google in a Nativescript iOS application: A step-by-step guide

I've been working on implementing Google's ID provider login in Nativescript using the nativescript-social-login plugin. While it works smoothly on Android, I've hit a roadblock with iOS. Following the instructions from the plugin creator, ...

iosangulartypescriptnativescriptangular2-nativescript

How can Vue.js and Nightwatch.js be used to extract information from WebElements using the WebDriver protocol?

When running my end-to-end tests with Nightwatch.js, I am able to retrieve elements using the WebDriver protocol, but the returned result (res.value) is an array of element IDs... How can I access the details of these elements? [ { ELEMENT: '0.03261 ...

node.jsvue.jsnightwatch.jsend-to-end

What is the method for incorporating a variable into a fragment when combining schemas using Apollo GraphQL?

In my current project, I am working on integrating multiple remote schemas within a gateway service and expanding types from these schemas. To accomplish this, I am utilizing the `mergeSchemas` function from `graphql-tools`. This allows me to specify neces ...

javascripttypescriptgraphqlapolloapollo-server

Utilize the "Required" directive within a nested property

If I have a TypeScript type defined as follows: type State = { one?: string; two?: { three?: { four?: string; five?: string; six: number }, seven: string } } Is there a way to create a new type based on State where only ...

typescript

Can you explain the distinction between employing 'from' and 'of' in switchMap?

Here is my TypeScript code utilizing RxJS: function getParam(val:any):Observable<any> { return from(val).pipe(delay(1000)) } of(1,2,3,4).pipe( switchMap(val => getParam(val)) ).subscribe(val => console.log(val)); ...

typescriptrxjs

The Vue dynamic component is failing to re-render

One of my essential components handles all input fields by enclosing a dynamic component. <my-input v-model="book_id" as="select" :options="availableBooks" label="Books" :dirty="changed.includes('book_id')"/> To populate this ...

vue.js

Guide on sharing a Vue project with other devices within a network

I'm a complete beginner when it comes to vue.js. After working on a few small projects, I want to make sure I understand how to share a vue project with others at this stage. Typically, I know that running 'npm run serve' in my project dir ...

javascriptnode.jsvue.jsnpmvuejs2

A guide on utilizing dotenv to access .env file variables in TypeScript

I'm currently facing an issue with utilizing a .env file for storing API keys in a TypeScript React project. The .env file is placed at the project's root directory, and I'm attempting to retrieve its variables from src/index.tsx using proce ...

node.jsreactjstypescriptenvironment-variablesdotenv

Issue: StaticInjectorError(DynamicTestModule)[CityService -> Http]: Http provider not found

I am working on a service that retrieves all cities from a web service. @Injectable() export class CityService { constructor(private http: Http, private router: Router, private auth: AuthService) { } public getAllCity(): Observable<City[]> { ...

angulartypescripttestingjasmine

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

I have a card with add and delete buttons. I want only the add button to show initially, and when clicked, a new card should open with both add and delete buttons. Everything is working as expected except I can't figure out how to hide the delete butt ...

javascripthtmlangulartypescript

What is the process for transforming a key-value object from JavaScript to TypeScript?

I am currently facing a challenge in converting a JavaScript object into a TypeScript version as part of our code refactoring process :( I am struggling to figure out how to properly migrate a JS JSON object into a correct TS format. For instance, consider ...

javascripttypescript

Navigating Angular QueryList through loops

I am currently trying to gather all the images in my component and store them in an array. To achieve this, I am utilizing Angular's @ViewChildren which returns a QueryList of ElementRef: @ViewChildren('img', { read: ElementRef }) images: Q ...

javascriptangulartypescriptloops

Issue with Socket.IO: socket.on not executed

Recently, I devised a custom asynchronous emitter for implementing a server -> client -> server method. Regrettably, the functionality is not meeting my expectations. Although it emits the event, it fails to execute the callback as intended. Upon a ...

javascriptnode.jstypescriptsocketssocket.io