Angular 5.2.3 - ERROR TypeError: sweetalert_1.default is not a function

[softsaravanacse]

I am getting this error while using es5. But it works fine on es6.

sweetalert version : 2.1.0

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2015",
            "dom"
        ]
    }
}

import swal from 'sweetalert';
swal({
             text: 'Your request has been processed successfully.',
             icon: 'success'
           }).then((value) => {
             if (value) {
                 console.log(value);
             }
           });

[dalvarezr]

I started having this error when I uncommented the following lines so that my project could be compatible with IE9, 10 and 11. Located in polyfills.ts
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es7/array';

Changing the "target" to es6 as you suggest breaks my app on IE 11 since apparently es6 arrow functions aren't yet supported on IE 11 and compiling my project will throw an error.

[pedro412]

Having same error

[acib708]

+1

[mpintener]

I'm having the same error!

[greatkeke]

me,too.

[dalvarezr]

I solved the issue by swaping to sweetalert 2. Im not sure if its developed by the same team (so im sorry for the propaganda if not).
Hope it can be useful for those having the same issue and I'd be glad to swich back to swal 1 if this gets fixed.
Happy coding!

[lionralfs]

Hey guys.
This seems to be related to this bug in Angular CLI where default exports are handled differently in dev. They seem to have fixed it in v6.0.0-beta.4

Do you still get any errors when running ng serve --prod?

Alternatively, you could use this somewhat dirty workaround:

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;

swal('test');

[greatkeke]

@lionralfs It works fine.

[mombe090]

@lionralfs you are a true lion work fine.

[pluma]

The npm release doesn't export a default property, so the typings are wrong. The typings indicate it should be treated as an ES module, but the npm release is a CommonJS module.

The documentation suggests to use export = instead of export default in this case: https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

The matching import looks like this:

import swal = require("sweetalert");

Yes, it's nonstandard syntax, which will cause problems for users targeting ES modules. By enabling synthetic imports or using the import * as swal syntax it's possible to work around this, but the proper solution would be either to correct the typings or simply add module.exports.default = module.exports to the end of the main JS file so people can import it as an ES module.

[ya1k96]

Great! im done

[Br0wnZ]

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;`

[Janaka-Steph]

I had the same issue with ReactJS, but using https://github.com/sweetalert/sweetalert-with-react fixed it