Sweetalert: Typings error TS2403: Subsequent variable declarations must have the same type.

Created on 25 Jan 2019  ·  22Comments  ·  Source: t4t5/sweetalert

Upgraded to Angular 7 w/ TypeScript 3.2.4 and am now getting the following whenever I compile:

import swal from 'sweetalert';

swal({ ... });

ERROR in node_modules/sweetalert/typings/sweetalert.d.ts(4,9): error TS2403: Subsequent variable declarations must have the same type. Variable 'swal' must be of type 'typeof import("C:/Projects/me/browser/node_modules/sweetalert/typings/sweetalert")', but here has type 'SweetAlert'.

If I edit node_modules/sweetalert/typings/sweetalert.d.ts from...

import swal, { SweetAlert } from "./core";

declare global {
  const swal: SweetAlert;
  const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

... to ...

import swal, { SweetAlert } from "./core";

export default swal;
export as namespace swal;

... it starts working.

Any ideas?

Most helpful comment

Hi all,

Save yourself the effort and use sweetalert 2 https://sweetalert2.github.io/

All 22 comments

Same issue, same situation.

However, I noticed that just commenting out the line export as namespace swal; also lets it compile. I've been looking at the TypeScript changelogs for any clues...

Same issue, same situation.

However, I noticed that just commenting out the line export as namespace swal; also lets it compile. I've been looking at the TypeScript changelogs for any clues...

same issue
I used this solution
but I don't think this solution is correct.

Same issue.

Also same issue. CI builds failing because of this.

I have this same issue when running under OpenBSD. Yes I know not a mainstream OS, but the version of TypeScript available makes anything with sweetalert unusable :(

I have this same issue when running under OpenBSD. Yes I know not a mainstream OS, but the version of TypeScript available makes anything with sweetalert unusable :(

@t4t5 Can you take a look on this issue?

Also experiencing this with Angular 7

Any idea on a workaround apart from editing the definition file manually? It's becoming a bit of a hassle remembering to do that after every clone / npm install.

@bogdan-calapod Here's what I have been doing as a workaround, so that our CI build doesn't fail:

  1. Download Sweetalert minified script file here (right-click and Save link as sweetalert.min.js).
  2. Place sweetalert.min.js in src/assets/scripts in Angular application.
  3. Add src/assets/scripts/sweetalert.min.js to scripts entry in angular.json
  4. In any components/services you want to use Sweetalert, add declare var swal: any; above the class declaration.
  5. You can use Sweetalert anywhere in the file using global variable swal, i.e. return swal({...})
  6. You can now remove Sweetalert NPM package since you are using local script file: npm uninstall sweetalert --save

Hi all,

Save yourself the effort and use sweetalert 2 https://sweetalert2.github.io/

Any updates with this issue?

Hi all,

Save yourself the effort and use sweetalert 2 https://sweetalert2.github.io/

This have support for 3 buttons or more?

@DVGalarza this workaround didn't worked for me. ReferenceError: "swal is not defined" is what i'm getting.

@alvarofelipe12 In the file you are trying to use 'swal' in, did you add declare var swal: any; to the top of the file (below imports)? If so, also check that sweetalert.min.js is referenced properly in the 'scripts' section of angular.json.

Upgraded to Angular 7 w/ TypeScript 3.2.4 and am now getting the following whenever I compile:

import swal from 'sweetalert';

swal({ ... });

ERROR in node_modules/sweetalert/typings/sweetalert.d.ts(4,9): error TS2403: Subsequent variable declarations must have the same type. Variable 'swal' must be of type 'typeof import("C:/Projects/me/browser/node_modules/sweetalert/typings/sweetalert")', but here has type 'SweetAlert'.

If I edit node_modules/sweetalert/typings/sweetalert.d.ts from...

import swal, { SweetAlert } from "./core";

declare global {
  const swal: SweetAlert;
  const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

... to ...

import swal, { SweetAlert } from "./core";

export default swal;
export as namespace swal;

... it starts working.

Any ideas?

my alternative was to rename const swal to const _swal

import swal, { SweetAlert } from "./core";

declare global {
const _swal: SweetAlert;
const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

hello !, same issue

I fixed this by overriding the sweetalert types. I added a file in the src dir named src/node_modules/sweetalert/index.d.ts

//this file is needed because the sweetalert typings need to be overwritten because they are broken
//the real fix here is to stop using sweetalert

declare global {
  const _swal: any;
  const sweetAlert: any;
}

export default _swal;
export as namespace swal;

Solved it by changing this line:

import swal from 'sweetalert';

to:

const swal = require('sweetalert');

or (with the interface):

import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = require('sweetalert');

I'm having the same issue in Angular 10. Yeah, the problem seems to be in sweetalert.d.ts as according to my IDE, there's an error, so I don't think it's a bad solution to comment it:

image

@drmencos Is that for Node.js? require doesn't work for me in Angular 10.

En el archivo: node_modules>sweetalert>typings>sweetalert.d.ts
Comentar: const swal: SweetAlert;

import swal, { SweetAlert } from "./core";

declare global {
//const swal: SweetAlert;
const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

changing import 'sweetalert' to require('sweetalert') worked for me.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rapeflower picture rapeflower  ·  4Comments

vmitchell85 picture vmitchell85  ·  6Comments

Untit1ed picture Untit1ed  ·  5Comments

waldyrious picture waldyrious  ·  5Comments

yrshaikh picture yrshaikh  ·  4Comments