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

Created on 6 Feb 2018 · 13Comments · Source: t4t5/sweetalert

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

Source

softsaravanacse

👍6

Most helpful comment

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

lionralfs on 4 Mar 2018

👍25 🎉5

All 13 comments

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.

dalvarezr on 14 Feb 2018

Having same error

pedro412 on 26 Feb 2018

acib708 on 1 Mar 2018

I'm having the same error!

mpintener on 2 Mar 2018

me,too.

greatkeke on 4 Mar 2018

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!

dalvarezr on 4 Mar 2018

👍2

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

lionralfs on 4 Mar 2018

👍25 🎉5

@lionralfs It works fine.

greatkeke on 4 Mar 2018

@lionralfs you are a true lion work fine.

mombe090 on 12 Apr 2018

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.