Sweetalert seems to have hit a roadblock and is not functioning properly. An error has been detected in its TS file

Currently, I am responsible for maintaining an application that utilizes Angular 7.0.7 and Node 10.20.1. Everything was running smoothly until yesterday when my PC unexpectedly restarted. Upon trying to run ng serve, I encountered the following error:

ERROR in node_modules/sweetalert2/sweetalert2.d.ts(277,39): error TS1005: ',' expected. node_modules/sweetalert2/sweetalert2.d.ts(277,68): error TS1011: An element access expression should take an argument. node_modules/sweetalert2/sweetalert2.d.ts(277,69): error TS1005: ';' expected. node_modules/sweetalert2/sweetalert2.d.ts(277,70): error TS1128: Declaration or statement expected. node_modules/sweetalert2/sweetalert2.d.ts(277,82): error TS1005: '(' expected.

The content of my package.json file is as follows:

{
  "name": "frontend",
  "version": "0.0.0",
  ... (package.json content continues here)
}

In attempting to resolve this issue, I have tried several troubleshooting methods:

  • I uninstalled and reinstalled all node modules using npm install, but the issue persisted.
  • Downgrading TypeScript to version 2.X did not resolve the problem either.
  • Reinstalling just Sweetalert using 
    npm uninstall sweetalert2 && npm install sweetalert2
    also proved unsuccessful.
  • Running npm audit fix highlighted numerous issues within the app, none of which resolved the original error.

Examining the Sweetalert file at the specified error line, I came across the following code snippet:

/**
     * Provide an array of SweetAlert2 parameters to show multiple popups, one popup after another.
     *
     * @param steps The steps' configuration.
     */
    function queue<T>(steps: readonly (SweetAlertOptions | string)[]): Promise<T>;

Despite trying various solutions, the error remained consistent... What could be causing this issue?

angulartypescriptnpmsweetalert2

Answer №1

Hey there! I encountered a similar issue recently and managed to find a temporary solution while we wait for a more permanent fix. I decided to downgrade the software, and surprisingly it worked. Give it a try and see if it resolves the problem for you too.

To perform the downgrade, simply run this command in your terminal: npm install [email protected]

Answer №2

I've also been facing some challenges with it.

But I found that using these specific versions of the packages made it work for me.

"dependencies": {
  // ... 
  "@angular/common": "^7.2.16",
  "@angular/core": "^7.2.16",
  // ...
  "sweetalert2": "8.19.0",
  "@sweetalert2/ngx-sweetalert2": "^6.0.0",
},
"devDependencies": {
   "typescript": "3.2.4"
}

Alternatively, you could give a shot to these different versions:

"sweetalert2": "^8.0.0",
"@sweetalert2/ngx-sweetalert2": "^5.0.0"

Answer №3

The issue likely arises from a mismatch in the required typescript version between sweetalert2 and your project.

Your package.json contains the following:

"sweetalert2": "^9.14.0" // Requires versions like 9.X where X is >= 14
"typescript": "~3.1.6" // Requires versions like 3.1.Y where Y is >= 6

Verify the sweetalert2 version locked by your project in the package-lock.json (if no lock file, default to 9.17.2). Next, visit 

https://github.com/sweetalert2/sweetalert2/blob/v[THE VERSION]/package.json
to confirm the expected typescript version.

If you find 9.14.0, they also require typescript version ^3.5

Answer №4

Great job! All you need to do is delete the 'readonly' property and your app will be up and running smoothly

Answer №5

If you want to import using CommonJS in your component, you can do it like this:

const SweetAlert = require('sweetalert2');

This method worked perfectly for me! 😊

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

What is the correct way to implement strong typing for a reactive array consisting of interface Class objects in TypeScript?

My goal is to develop a dynamic array that can store data fetched from a database through an HTTP request using a SQL query. Since I lack direct access to the database, my only option is to submit a query to retrieve the required information. The retrieved ...

typescriptvue.jsaxios

Creating a new element in the DOM when a button is clicked using Angular 2+

Greetings! I am currently in the process of learning how to manipulate the DOM using Angular 2+ and my goal is to incorporate an Input field with type email when the click event is activated. Despite conducting some research via Google, I have been unable ...

angulartypescriptdom

Encountering issues with installing angular/cli due to errors popping up

When attempting to install Angular in my terminal after completing the setup, I encountered the following error message: I have already installed: Node v6.10.3 npm ERR! Darwin 17.7.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g ...

angularangular-cli

After combining two files in browserify, the error message "XXX.foo is not a function" appeared

When using browserify to bundle two JavaScipt files into one with the command: browserify X1.js X2.js --standalone XXX > bundle.js The file X1.js contains a function like this: function foo() { console.log("something") } And it is being exported i ...

javascriptnpmbrowserify

Getting an error when trying to npm install jsbin

Attempting to set up jsbin. Currently working on it with jsbin. Encountering the following error. I am carrying out the process in a Linux environment, using the command: sudo npm install -g jsbin Encountered this error message npm WARN deprecate ...

node.jsnpmjsbin

Guide to importing a Sass theming module located in the node_modules directory

After developing a vue.js library that utilizes scss for styling and releasing it as an npm package, I encountered a need for custom themes. The default theme provided within the package works well, but implementing a personalized theme from the consuming ...

npmvue.jssass

Creating Versatile Functions for HttpClient Wrapping

Scenario: In my set of services, I find myself repeatedly writing code for data calls which results in a lot of duplicated code. To streamline the process and reduce redundancy, I am looking to implement a wrapper function: All these functions essentiall ...

angulartypescript

Tips for updating the color of checkboxes in an Angular application

I'm looking to update the appearance of a checkbox when it is disabled. app.component.html: <input type="checkbox" class="custom-control-input" [disabled]="item.disabled" [checked]="item.checked"> The cu ...

angular

Is your GatsbyJS blog no longer compiling following an "npm update"?

I'm currently facing challenges with Gatsby, webpack, or npm that I haven't fully grasped yet. Upon running certain commands in the terminal, an issue seems to have surfaced while attempting to resolve a "could not find module" error related to ...

node.jsnpmwebpackgatsby

Creating and Injecting Singleton in Angular 2

I have a custom alert directive set up in my Angular app: import { Component } from 'angular2/core'; import { CORE_DIRECTIVES } from 'angular2/common'; import { Alert } from 'ng2-bootstrap/ng2-bootstrap'; @Component({ sele ...

typescriptangularangular2-directives

Angular authentication guard does not redirect properly after returning a Promise<UrlTree>

My authentication guard is set up to control access to the /sign-in and /verify-email routes, allowing only users who are not logged in or have not verified their email: export const signInGuard: CanActivateFn = (activatedRouteSnapshot: ActivatedRouteSnap ...

node.jsangulartypescriptnpmangular2-routing

How can I show distinct values in the Angular Material dropdown menu?

I am currently working on implementing a feature where I need to show unique options for the select using angular material. Below is what I have so far: where appitem is an array of items. <mat-form-field> <mat-select placeholder="Select app ...

angulartypescriptangular-materialangular7

The botium plugin did not function properly when attempting to use the agentzip option

Tested out the following command: botium-connector-dialogflow-cli dialogflowimport dialogflow-intents --agentzip "./spec/convo" Issue encountered: FAILED: Error: Loading Botium plugin failed ...

ubuntunpmautomationchatbot

Is it possible to use the Husky "commit-msg" hook to git add new files?

I am currently setting up an automatic versioning system where if I use git commit with the message format PATCH: {message}, the app's patch version will automatically be updated (and the same for the prefixes MINOR and MAJOR as well). My approach inv ...

javascriptgitnpmhuskygit-husky

Is there a way to only retrieve a single build/dist file from an NPM installation instead of the entire repository?

Is it possible to solely depend on a single file from a repository? Does the package.json offer any functionality to retrieve a specific distributed build file instead of having to download the entire repository? Alternatively, should the responsibility ...

npmcompilationrepositorybundlenpm-install

Save the frontend maven plugin output to a designated file

In the super-pom, I have integrated a powerful frontend-maven-plugin to handle the building of npm artifacts. One of the steps involved in this process is generating a dependency tree for npm and saving the results to a file. After experimenting with some ...

mavennpmpom.xmlfrontend-maven-plugin

The beforePopState event in next/router is not triggering as expected

Noticing an issue where the beforePopState event is not triggering when I use the back button. This code snippet is part of a hook defined in _app.js according to the documentation. The current version being used is 12.1.5 If anyone has insights on what ...

javascriptreactjstypescriptnext.js

Surge the PrimeNG DialogModule by integrating the CalendarModule to enhance its functionality

Looking for a way to create an Edit popup dialog that includes an input form in Angular2 using the PrimeNG widgets. I have encountered issues with the dynamic content of the dialog box as shown in the screenshot. I attempted to contain the CalendarModule ...

cssangularprimeng

What is the best way to detect a change in a property using rxjs?

My Angular6 application has a simple input tag: <input type="text" name="searchBox" [(ngModel)]="searchTerm" class="form-control" /> I want to create an observable of the searchTerm property in order to apply operators like debounce, etc. How can I ...

angularrxjs

Access to the specified executable files created by either electron-packager or electron-forge is restricted by Windows

Running into an issue on my Win 8.1 x64 machine where the Windows binaries are generating an error message upon execution. Encountering a Windows error stating: "Windows cannot access the specified device, path, or file. You may not have the appropriate ...

node.jsnpmelectronelectron-packagerelectron-forge