sweetalert2: Swal 8.x.x doesn't show correctly (styles are missing)

Current behavior

Hi ! We’re trying to fire a swal in an angular app.
I’ve just downloaded the latest version of sweetalert2 (8.0.1) from npm and imported it in my angular componenent (angular 6 with typescript). Then i tried to fire the swal in ngOnInit() with a code snippet taken from sweetalert2 website, however, the swal doesnt popup, swal’s html elements are rather added to the DOM, without being styled :

We are using the standard sweetalert2 library, not ngx-sweetalert2, and it seems to be a problem with version 8 only, because rolling back to version 7.33.1 fix this issue.

Note that, I’ve not tested v8.0.1 without using angular or using ngx-sweetalert2.

Expected behavior

The sweetalert should appear normaly, as it’s demonstrated on sweetalert’s website.

Live demo

Here’s the code of my component :

import { Component, OnInit } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 20 (15 by maintainers)

Commits related to this issue

fix(webpack): prioritize 'main' over 'module' For more details see https://github.com/sweetalert2/sweetalert2/issues/1390 — committed to sweetalert2/sweetalert2-webpack-demo by limonte 5 years ago

Most upvoted comments

Hello! I am using SweetAlert v11.4.4 with Vite and React on the latest version and the styles are not added to the header. I had to use import as Limote suggests and it worked

import Swal from 'sweetalert2/dist/sweetalert2.all.js';

This would work, but here’s a slightly better solution:

import Swal from 'sweetalert2'
import 'sweetalert2/dist/sweetalert2.css'

limonte on Mar 7, 2022

Thanks for the live demo @obrassard

Maybe you could try to download it + the node modules, and check if you face this problem locally too…

Yup, facing it locally too.

This helped:

- import Swal from 'sweetalert2';
+ import Swal from 'sweetalert2/dist/sweetalert2.all.js';

Which leads me to the conclusion that angular bundling process is for some reason taking the module field from package.json instead of main field.

We made changes for v8 in package.json https://github.com/sweetalert2/sweetalert2/pull/1378 to support ES modules:

- "jsnext:main": "src/sweetalert2.js",
+ "module": "src/sweetalert2.js",

I have no idea why Angular uses module over main. Maybe @toverux have any clue about this behavior?

limonte on Jan 27, 2019

Hello! I am using SweetAlert v11.4.4 with Vite and React on the latest version and the styles are not added to the header. I had to use import as Limote suggests and it worked

import Swal from 'sweetalert2/dist/sweetalert2.all.js';

christiand0r on Mar 7, 2022

Here’s how I solved it for sweetalert2-webpack-demo:

webpack.config.babel.js:

module.exports = {
  ...
  resolve: {
    mainFields: [
      'main',
      'module'
    ]
  },
  ...
}

limonte on Jan 27, 2019

I just upgraded all angular dev-deps to latest and the issue is still there.

I have no idea why Angular uses module over main

This is the problem, please report it to the according Angular repository.

As a workaround you can use either

import Swal from 'sweetalert2/dist/sweetalert2.all.js';

Or import styles separately:

import Swal from 'sweetalert2'
import 'sweetalert2/src/sweetalert2.scss'

limonte on Jan 27, 2019

I’m experiencing this issue as well with just a basic Webpack setup. Specifying the mainFields fixes the issue for me. Is that the desired work-around for now?

codebycliff on Jan 28, 2019

Here’s how I solved it for sweetalert2-webpack-demo

How did you figure this out @limonte??? You need to tell me your secret 😃

BTW, for the record, I tried setting manually mainFields in ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js as:

            mainFields: [
                ...(wco.supportES2015 ? ['es2015'] : []),
                'browser', 'main', 'module'
            ],

And the project shared by @obrassard works locally as well. I’m not sure this is the best way to configure build-angular (and that’s one of the main reason why I don’t like frameworks) but that may explains why the project works fine on stackblitz. Hope it helps…

gverni on Jan 27, 2019

oops @limonte our comments crossed 😄

gverni on Jan 27, 2019