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

[kspearrin]

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?

[DVGalarza]

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...

[elhakeem]

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.

[nikosanif]

Same issue.

[bogdan-calapod]

Also same issue. CI builds failing because of this.

[doggy8088]

I think this line have to removed:

sweetalert/src/sweetalert.d.ts

Line 4 in bfd0e63

const swal: SweetAlert;

[basis0]

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 :(

[basis0]

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 :(

[doggy8088]

@t4t5 Can you take a look on this issue?

[silentFred]

Also experiencing this with Angular 7

[bogdan-calapod]

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.

[DVGalarza]

@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

[silentFred]

Hi all,

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

[akvaliya]

Any updates with this issue?

[alvarofelipe12]

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.

[DVGalarza]

@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.

[sbvtscorvo]

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;

[bernard-ng]

hello !, same issue

[jjmerri]

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;

[drmencos]

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');

[airda2895]

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:

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

[DaniGo-1]

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;

[eoussama]

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

[01shadowalker01]

Not fixed yet? any ideas?

[Abel3047]

Im trying to use environment variables and I fired the following commands:
ng add @ngx-env/builder
set "NG_APP_BASEURL=myexampleurl.com"

only to get this error, error TS2403: Build:Subsequent variable declarations must have the same type. Variable 'process' must be of type 'Process', but here has type '{ env: { NG_APP_ENV: string; NG_APP_BASEURL: string; }; }'.

the error is coming from my env.d.ts file.
which looks like this,
declare var process: {
env: {
NG_APP_ENV: string;
NG_APP_BASEURL: string;
};
};

[asika32764]

This works for me.

Create a shims-sweetalert.d.ts

import swal from "sweetalert/typings/core";

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

export default swal;
export as namespace swal;