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

Question

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?

angular typescript npm sweetalert2

Answer 1

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

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 3

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 4

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 5

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 6

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 7

Answer №4

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

Answer 8

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

Answer 9

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! 😊

Answer 10

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! 😊

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

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The Influence of Getter Performance in Angular Templates

Mapping Observable.forkJoin() responses to the respective requests can be achieved by following these steps

"Encountered a 'NextAuth expression cannot be called' error

What is the best way to arrange map elements in a React application?

An easy method to define argument types for every function type in TypeScript

Angular 4: Utilizing reactive forms for dynamic addition and removal of elements in a string array

Utilizing group by date feature in Angular ag-Grid

The production output for the Wp-strap WordPress plugin boilerplate appears to be blank

Why was the Project directory not found? To resolve this issue and restart Next.js in a new directory, an error occurred during the npm run dev command on the front

Scroll horizontally in Ionic 3 without displaying the scrollbar by implementing a button

The occurrence of a loading error arises when attempting to load the second component, displaying the message 'The template instructed for component SidebarComponent is

The specified module '...' is identified as a non-module entity and therefore cannot be imported using this specific construct

Having trouble with npm commands on Ubuntu?

Experiencing an issue with my Angular 6.1.0 setup, using angular-cli 7 and primeng 7 - specifically encountering the error message "Initializers are not allowed in ambient context."

Utilize VUE NPM to add imported packages to all remaining files

The text inside angular spans mysteriously vanishes

The paths configuration in tsconfig.json is not functioning as anticipated

Unable to retrieve the updated value from the service variable

Embedding and authorization

Retrieve user details from a NextJS application following a successful Keycloak authentication on a Kubernetes cluster