Error: export 'default' (imported as 'Swal') was not found in 'sweetalert2' (module has no exports)

Question

I am trying to include sweetalert2 in my Angular project, but it gives compile time error. The error /src/app/pages/signup/signup.component.ts:29:16-25 - Error: export 'default' (imported as 'Swal') was not found in 'sweetalert2' (module has no exports)

step follow

1.install sweetalert2 2.import on component .ts file (import Swal from 'sweetalert2') 3.call by using Swal.fire()

/src/app/pages/signup/signup.component.ts:29:16-25 - Error: export 'default' (imported as 'Swal') was not found in 'sweetalert2' (module has no exports)

anyone having solution?

Answer 1

1. So you need to first make sure of that you are including the required css & js files in angular.json/angular-cli.json (depending upon your ng version)

  "styles": [
        "../node_modules/sweetalert2/dist/sweetalert2.css"
      ],
      "scripts": [
        "../node_modules/sweetalert2/dist/sweetalert2.js",
      ],

2. then, in your component, you can import it like this

import swal from "sweetalert2";

3. And in your component you can use it like this

swal({
     type: 'success',
     title: 'your message',
     showConfirmButton: false,
     timer: 1500
   });

Answer 2

I had this exact same error, problem was that I was exporting the component as:

const Component = () => { Swal.fire({ //configs... }) 

export default Component;

I deleted that last line and changed to:

export const Component = () => { Swal.fire({ //configs... })

And everything started to work again.